:root{--color-bg-primary: #312e2b;--color-bg-secondary: #272522;--color-bg-tertiary: #1e1c1a;--color-bg-board: #769656;--color-bg-board-alt: #eeeed2;--color-surface-1: #3e3a36;--color-surface-2: #4a4543;--color-surface-3: #565250;--color-text-primary: #ffffff;--color-text-secondary: #bababa;--color-text-muted: #888888;--color-text-link: #81c784;--color-accent-primary: #81c784;--color-accent-secondary: #629760;--color-accent-gold: #f0c45c;--color-accent-platinum: #e0e0e0;--color-success: #629760;--color-error: #ca3431;--color-warning: #f0c45c;--color-info: #5d9fd5;--color-success-bg: rgba(98, 151, 96, .15);--color-success-text: #81c784;--color-danger: #ca3431;--color-danger-bg: rgba(202, 52, 49, .15);--color-danger-text: #ff6b6b;--color-danger-hover: #b02a28;--color-warning-bg: rgba(240, 196, 92, .15);--color-warning-border: rgba(240, 196, 92, .3);--color-warning-text: #f0c45c;--color-primary: #81c784;--color-primary-hover: #629760;--color-button-primary: #81c784;--color-button-primary-hover: #629760;--color-button-secondary: #4a4543;--color-button-secondary-hover: #565250;--color-border-subtle: #4a4543;--color-border-default: #565250;--color-border-strong: #6d6865;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .6);--shadow-glow: 0 0 20px rgba(129, 199, 132, .3);--font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-secondary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Consolas", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: .125rem;--radius-md: .25rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-slower: .5s ease;--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-overlay: 30;--z-modal: 40;--z-popover: 50;--z-tooltip: 60;--z-notification: 70}body{font-family:var(--font-secondary);color:var(--color-text-primary);background-color:var(--color-bg-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.surface-1{background-color:var(--color-surface-1);border:1px solid var(--color-border-subtle)}.surface-2{background-color:var(--color-surface-2);border:1px solid var(--color-border-default)}.surface-3{background-color:var(--color-surface-3);border:1px solid var(--color-border-strong)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--font-semibold);font-family:var(--font-primary);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-base);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-button-primary);color:var(--color-bg-primary)}.btn-primary:hover:not(:disabled){background-color:var(--color-button-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-button-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-default)}.btn-secondary:hover:not(:disabled){background-color:var(--color-button-secondary-hover);border-color:var(--color-border-strong)}.card{background-color:var(--color-surface-1);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);transition:all var(--transition-base)}.card:hover{border-color:var(--color-border-default);box-shadow:var(--shadow-sm)}.input{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-base);color:var(--color-text-primary);transition:all var(--transition-base);width:100%}.input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #81c7841a}.badge-premium{background:linear-gradient(135deg,var(--color-accent-gold),#f4d03f);color:var(--color-bg-primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.05em}@keyframes slideIn{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.animate-fadeIn{animation:fadeIn var(--transition-base)}.animate-slideIn{animation:slideIn var(--transition-slow)}.animate-pulse{animation:pulse 2s infinite}:root{font-family:var(--font-secondary);line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text-primary);background-color:var(--color-bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-bg-primary);overflow-x:hidden}h1{font-size:clamp(1.8em,5vw,2.5em);line-height:1.1}h2{font-size:clamp(1.4em,4vw,1.8em);line-height:1.2}h3{font-size:clamp(1.1em,3vw,1.3em);line-height:1.3}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .25s}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}input{font-family:inherit}@media (max-width: 768px){body{min-height:100vh;min-height:-webkit-fill-available}#root{padding:1rem;width:100%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.1em}button{padding:.5em 1em;font-size:.9em}}@media (max-width: 480px){h1{font-size:1.75em}h2{font-size:1.25em}button{width:100%;padding:.75em 1em}}.room-type-selector{padding:var(--space-6) 0;text-align:center;max-width:1000px;margin:0 auto}.room-type-selector h2{color:var(--color-text-primary);font-size:var(--text-xl);font-weight:var(--font-bold);margin-bottom:var(--space-6);text-transform:uppercase;letter-spacing:.05em}.carousel-container{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--space-6);min-height:370px;overflow:hidden;margin-bottom:var(--space-6)}.carousel-track{position:relative;width:500px;height:100%;display:flex;align-items:center;justify-content:center;perspective:1000px}.carousel-arrow{position:relative;z-index:10;background-color:var(--color-surface-2);border:2px solid var(--color-border-default);width:72px;height:72px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-base);color:var(--color-text-secondary)}.carousel-arrow:hover:not(:disabled){background-color:var(--color-accent-primary);border-color:var(--color-accent-primary);color:var(--color-bg-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.carousel-arrow:disabled{opacity:.3;cursor:not-allowed}.carousel-arrow svg{width:40px;height:40px}.room-type-card{position:absolute;background-color:var(--color-surface-1);border:2px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-6);cursor:pointer;transition:all .5s cubic-bezier(.4,0,.2,1);width:280px;height:330px;box-shadow:var(--shadow-md);display:flex;flex-direction:column}.room-type-card.classic .icon-wrapper{background:linear-gradient(135deg,#3b82f6,#2563eb)}.room-type-card.classic .icon{color:#fff}.room-type-card.super .icon-wrapper{background:linear-gradient(135deg,#f59e0b,#d97706)}.room-type-card.super .icon{color:#fff}.room-type-card.extended .icon-wrapper{background:linear-gradient(135deg,#10b981,#059669)}.room-type-card.extended .icon{color:#fff}.room-type-card.current{transform:translate(0) scale(1);opacity:1;z-index:5;border-color:var(--color-accent-primary);background-color:var(--color-surface-2)}.room-type-card.current:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl)}.room-type-card.side-card{z-index:3;opacity:.6}.room-type-card.side-card.prev{transform:translate(-200px) scale(.85) rotateY(25deg)}.room-type-card.side-card.next{transform:translate(200px) scale(.85) rotateY(-25deg)}.room-type-card.hidden{opacity:0;transform:translate(0) scale(.5);pointer-events:none;z-index:1}.card-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4);display:block}.card-title{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-2);font-family:var(--font-primary)}.card-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:.05em}.card-description{font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-4)}.card-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em}.badge-recommended{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary)}.badge-new{background:linear-gradient(135deg,var(--color-accent-gold),#f4d03f);color:var(--color-bg-primary)}.badge-challenging{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.carousel-indicators{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4)}.indicator{width:10px;height:10px;border-radius:50%;background-color:var(--color-surface-3);border:1px solid var(--color-border-default);cursor:pointer;transition:all var(--transition-base);padding:0}.indicator.active{background-color:var(--color-accent-primary);border-color:var(--color-accent-primary);transform:scale(1.2)}.indicator:hover:not(.active){background-color:var(--color-surface-2);border-color:var(--color-border-strong)}.card-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.icon-wrapper{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background-color:var(--color-surface-3);border-radius:var(--radius-lg);margin-bottom:var(--space-2)}.icon-wrapper .icon{width:36px;height:36px;color:var(--color-accent-primary)}.card-header h3{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text-primary);margin:0;white-space:nowrap}.card-content{flex:1;display:flex;flex-direction:column;gap:var(--space-3)}.description{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.4;margin:0}.mode-details{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-2) 0}.detail-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary)}.detail-icon{width:16px;height:16px;color:var(--color-text-muted)}.features{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:auto}.feature-tag{padding:var(--space-1) var(--space-2);background-color:var(--color-surface-3);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:var(--font-medium)}.card-footer{margin-top:var(--space-3)}.select-button{width:100%;padding:var(--space-2) var(--space-4);background-color:var(--color-accent-primary);color:var(--color-bg-primary);border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base)}.select-button:hover{background-color:var(--color-accent-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.select-hint{padding:var(--space-2) var(--space-4);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);text-align:center}.room-type-card.current[style*="cursor: pointer"]:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-primary)}.room-type-card.current[style*="cursor: pointer"]:hover .select-hint{color:var(--color-accent-primary)}.side-card .card-content,.side-card .card-footer{display:none}.side-card .card-header{margin-bottom:0}@keyframes cardSlideIn{0%{opacity:0;transform:translate(300px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes cardSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-300px) scale(.8)}}@media (max-width: 768px){.carousel-container{gap:var(--space-4);min-height:330px}.carousel-track{width:100%}.room-type-card{width:240px;height:290px;padding:var(--space-4)}.room-type-card.side-card.prev{transform:translate(-140px) scale(.8) rotateY(20deg)}.room-type-card.side-card.next{transform:translate(140px) scale(.8) rotateY(-20deg)}.icon-wrapper{width:50px;height:50px}.icon-wrapper .icon{width:30px;height:30px}.card-header h3{font-size:var(--text-base)}.card-icon{font-size:var(--text-3xl)}.card-title{font-size:var(--text-xl)}.carousel-arrow{width:60px;height:60px}.carousel-arrow svg{width:36px;height:36px}}@media (max-width: 480px){.room-type-selector h2{font-size:var(--text-lg);margin-bottom:var(--space-4)}.carousel-container{min-height:290px;gap:var(--space-3)}.room-type-card{width:200px;height:250px;padding:var(--space-3)}.room-type-card.side-card{display:none}.icon-wrapper{width:45px;height:45px}.icon-wrapper .icon{width:26px;height:26px}.card-header h3,.card-description{font-size:var(--text-sm)}}.lobby{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-4)}.title-mobile,.desc-mobile,.btn-text-mobile{display:none}.title-full,.desc-full,.btn-text-full{display:inline}.lobby-hero{text-align:center;margin-bottom:var(--space-10);display:none}.lobby-title{font-size:var(--text-4xl);font-weight:var(--font-bold);font-family:var(--font-primary);background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-accent-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-4)}.lobby-subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);margin-bottom:var(--space-6)}.player-setup{background-color:var(--color-surface-1);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-8);box-shadow:var(--shadow-sm)}.player-name-section{max-width:400px;margin:0 auto var(--space-6)}.player-name-label{display:block;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.05em;font-weight:var(--font-semibold)}.player-name-input{width:100%;padding:var(--space-4);background-color:var(--color-bg-secondary);border:2px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-lg);font-weight:var(--font-medium);transition:all var(--transition-base);text-align:center}.player-name-input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #81c7841a}.player-name-input:disabled{background-color:var(--color-bg-tertiary);cursor:not-allowed;opacity:.8}.error-message{display:block;margin-top:var(--space-2);color:var(--color-error);font-size:var(--text-sm);text-align:center}.username-hint{display:flex;align-items:center;gap:.25rem;margin-top:var(--space-2);color:var(--color-accent-primary);font-size:var(--text-sm);text-align:center;justify-content:center;line-height:1.5}.room-type-section{margin-bottom:var(--space-4);padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle)}.game-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}.game-option-card{background-color:var(--color-surface-2);border:2px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-5);text-align:center;transition:all var(--transition-base);position:relative;overflow:hidden}.game-option-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));transform:scaleX(0);transition:transform var(--transition-slow)}.game-option-card:hover{border-color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.game-option-card:hover:before{transform:scaleX(1)}.option-icon{font-size:var(--text-4xl);margin-bottom:var(--space-3)}.option-title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-2)}.option-description{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}.quick-play-btn{width:100%;padding:var(--space-4);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary);border:none;border-radius:var(--radius-lg);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-md)}.quick-play-btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width var(--transition-slow),height var(--transition-slow)}.quick-play-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.quick-play-btn:hover:after{width:300px;height:300px}.quick-play-btn:disabled{background:var(--color-button-secondary);cursor:not-allowed;transform:none}.ranked-play-btn{width:100%;padding:var(--space-4);background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-bold);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 4px 15px #f39c124d}.ranked-play-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.ranked-play-btn:hover:before{width:300px;height:300px}.ranked-play-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px #f39c1266;background:linear-gradient(135deg,#e67e22,#d35400)}.ranked-play-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 10px #f39c124d}.ranked-play-btn:disabled{background:var(--color-button-secondary);cursor:not-allowed;transform:none;box-shadow:none}.ranked-option{background:linear-gradient(135deg,#f39c1214,#e67e220d);border:2px solid transparent;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ranked-option:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(135deg,#f39c12,#e67e22,#d35400);border-radius:var(--radius-xl);z-index:-1;opacity:.8;transition:opacity var(--transition-base)}.ranked-option:hover:before{opacity:1;animation:ranked-glow 2s ease-in-out infinite}@keyframes ranked-glow{0%,to{filter:blur(3px) brightness(1)}50%{filter:blur(5px) brightness(1.2)}}.ranked-option:after{content:"⚡";position:absolute;top:var(--space-3);right:var(--space-3);font-size:var(--text-2xl);opacity:.3;animation:lightning-pulse 3s ease-in-out infinite}@keyframes lightning-pulse{0%,to{opacity:.3;transform:scale(1) rotate(-10deg)}50%{opacity:.6;transform:scale(1.1) rotate(10deg)}}.ranked-option .option-icon{filter:drop-shadow(0 0 20px rgba(243,156,18,.5));animation:icon-float 3s ease-in-out infinite}@keyframes icon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.join-code-section{display:flex;gap:var(--space-3);align-items:center;justify-content:center}.code-input{padding:var(--space-3) var(--space-4);background-color:var(--color-bg-tertiary);border:2px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-base);font-weight:var(--font-bold);text-transform:uppercase;text-align:center;letter-spacing:.1em;width:150px;transition:all var(--transition-base)}.code-input:focus{outline:none;border-color:var(--color-accent-primary);background-color:var(--color-bg-secondary)}.join-code-btn{padding:var(--space-3) var(--space-5);background-color:var(--color-button-secondary);color:var(--color-text-primary);border:2px solid var(--color-border-strong);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base)}.join-code-btn:hover:not(:disabled){background-color:var(--color-button-secondary-hover);border-color:var(--color-accent-primary);transform:translateY(-1px)}.solo-practice-wrapper{text-align:center;margin-top:var(--space-4)}.solo-practice-label{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background-color:var(--color-surface-3);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);font-size:var(--text-sm);color:var(--color-text-secondary)}.solo-practice-label:hover{background-color:var(--color-surface-2);color:var(--color-text-primary)}.solo-practice-checkbox{width:20px;height:20px;accent-color:var(--color-accent-primary);cursor:pointer}.active-games-section{background-color:var(--color-bg-secondary);border-radius:var(--radius-xl);padding:var(--space-8);margin-top:var(--space-8);border:1px solid var(--color-border-subtle)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.section-title{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-3)}.live-indicator{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background-color:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-full);font-size:var(--text-xs);color:#ef4444;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em}.live-dot{width:8px;height:8px;background-color:#ef4444;border-radius:50%;animation:pulse-live 2s infinite}@keyframes pulse-live{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-4)}.no-games{grid-column:1 / -1;text-align:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted);font-size:var(--text-lg)}.game-card{background:#2e2b2799;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--space-6);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-accent-primary) 20%,var(--color-accent-primary) 80%,transparent 100%);opacity:0;transition:opacity .3s ease}.game-card:hover:before{opacity:1}.game-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-xl);background:radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(129,199,132,.06),transparent 40%);opacity:0;transition:opacity .3s ease;pointer-events:none}.game-card:hover{border-color:#fff3;transform:translateY(-3px);box-shadow:0 10px 30px #0000004d,0 1px #ffffff1a inset}.game-card:hover:after{opacity:1}.player-match{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding:var(--space-3);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.player-info{display:flex;align-items:center;gap:var(--space-3)}.player-avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);color:var(--color-bg-primary);font-size:var(--text-lg)}.player-name{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text-primary)}.vs-divider{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-accent-gold);text-transform:uppercase}.waiting-player{opacity:.5;font-style:italic}.game-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-subtle)}.room-code-display{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--font-semibold)}.room-code-modern{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:#81c7841a;border:1px solid rgba(129,199,132,.2);border-radius:var(--radius-full);transition:all var(--transition-base)}.room-code-modern:hover{background:#81c78426;border-color:#81c7844d}.room-code-icon{color:var(--color-accent-primary);font-weight:var(--font-bold);font-size:var(--text-sm);opacity:.8}.room-code-value{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:.05em;color:var(--color-text-primary)}.room-code-copy{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-base);position:relative}.room-code-copy:hover{background:#ffffff1a;color:var(--color-text-primary)}.room-code-copy svg{transition:all var(--transition-base)}.room-code-copy .check-icon{position:absolute;opacity:0;transform:scale(.8);color:var(--color-accent-primary)}.room-code-copy.copied svg:first-child{opacity:0;transform:scale(.8)}.room-code-copy.copied .check-icon{opacity:1;transform:scale(1)}.room-code-copy:after{content:"Copied!";position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(10px);background:var(--color-bg-tertiary);color:var(--color-accent-primary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.room-code-copy.copied:after{opacity:1;transform:translate(-50%) translateY(-4px)}.game-status{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em}.status-waiting{background-color:#fbbf241a;color:#fbbf24;border:1px solid rgba(251,191,36,.3)}.status-active{background-color:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.status-ended{background-color:#6b72801a;color:#6b7280;border:1px solid rgba(107,114,128,.3)}.game-actions{display:flex;gap:var(--space-3)}.action-btn{flex:1;padding:var(--space-3);border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base);text-transform:uppercase;letter-spacing:.05em}.join-game-btn{background-color:var(--color-accent-primary);color:var(--color-bg-primary)}.join-game-btn:hover:not(:disabled){background-color:var(--color-accent-secondary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.spectate-game-btn{background-color:var(--color-surface-3);color:var(--color-text-primary);border:1px solid var(--color-border-default)}.spectate-game-btn:hover{background-color:var(--color-surface-2);border-color:var(--color-border-strong);transform:translateY(-1px)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 768px){.lobby{padding:var(--space-3) var(--space-2)}.title-mobile,.desc-mobile,.btn-text-mobile{display:inline}.title-full,.desc-full,.btn-text-full{display:none}.lobby-title{font-size:var(--text-3xl)}.player-setup{padding:var(--space-4);margin-bottom:var(--space-4)}.player-name-label{font-size:var(--text-xs)}.game-options{grid-template-columns:1fr;gap:var(--space-3)}.game-option-card{padding:var(--space-4)}.option-icon{font-size:var(--text-2xl);margin-bottom:var(--space-2)}.option-title{font-size:var(--text-lg);margin-bottom:var(--space-1)}.option-description{font-size:var(--text-sm);margin-bottom:var(--space-3)}.quick-play-btn,.join-code-btn{padding:var(--space-3) var(--space-4);font-size:var(--text-base)}.solo-practice-label{font-size:var(--text-sm)}.games-grid{grid-template-columns:1fr}.join-code-section{flex-direction:column;width:100%}.code-input{width:100%;font-size:var(--text-base)}.join-code-btn{width:100%}.active-games-section h2{font-size:var(--text-xl)}.game-card{padding:var(--space-3)}.player-match{padding:var(--space-2)}.player-avatar{width:32px;height:32px;font-size:var(--text-base)}.player-name{font-size:var(--text-sm)}.vs-divider{font-size:var(--text-base)}.game-status{font-size:var(--text-xs)}.action-btn{padding:var(--space-2);font-size:var(--text-xs)}}@media (max-width: 480px){.lobby{padding:var(--space-2)}.lobby-title{font-size:var(--text-2xl)}.lobby-subtitle{font-size:var(--text-base)}.player-setup{padding:var(--space-3);margin-bottom:var(--space-3)}.active-games-section{padding:var(--space-4)}.section-title{font-size:var(--text-xl)}.game-card{padding:var(--space-4)}}.quick-game-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.quick-game-popup{background-color:var(--color-surface-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:600px;width:100%;padding:var(--space-8);position:relative;animation:popupSlideIn .3s ease-out}@keyframes popupSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.popup-close-btn{position:absolute;top:var(--space-4);right:var(--space-4);background:none;border:none;font-size:var(--text-2xl);color:var(--color-text-secondary);cursor:pointer;transition:color .2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}.popup-close-btn:hover{color:var(--color-text-primary);background-color:var(--color-surface-3)}.popup-title{text-align:center;font-size:var(--text-2xl);margin-bottom:var(--space-6);color:var(--color-text-primary)}.popup-game-options{display:flex;justify-content:center}.quick-game-popup .game-option-card{margin-bottom:0;max-width:400px;width:100%}@media (max-width: 640px){.quick-game-popup{padding:var(--space-6)}.popup-title{font-size:var(--text-xl)}}@media (max-width: 768px){.lobby{padding:16px 16px 80px;background:var(--color-bg-primary)}.lobby-header{margin-bottom:24px}.lobby-title{font-size:28px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}.lobby-subtitle{font-size:16px;color:var(--color-text-secondary)}.rooms-container{display:flex;flex-direction:column;gap:12px}.room-card{background:var(--color-surface-1);border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease;position:relative;overflow:hidden}.room-card:active{transform:scale(.98);background:var(--color-surface-2)}.room-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent-primary) 0%,var(--color-accent-secondary) 100%);opacity:0;transition:opacity .2s ease}.room-card.available:before{opacity:1}.room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.room-name{font-size:18px;font-weight:600;color:var(--color-text-primary)}.room-status{font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;background:#ffffff1a;color:var(--color-text-secondary)}.room-status.available{background:#81c78433;color:var(--color-accent-primary)}.room-status.in-game{background:#ff980033;color:#ff9800}.room-players{display:flex;gap:12px;margin-bottom:12px}.player-slot{flex:1;padding:12px;background:#ffffff0d;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,.1)}.player-slot.occupied{background:#81c7841a;border-color:#81c7844d}.player-name{font-size:14px;font-weight:500;color:var(--color-text-primary);margin-bottom:4px}.player-rating{font-size:12px;color:var(--color-text-secondary)}.empty-slot{font-size:14px;color:var(--color-text-muted);font-style:italic}.room-actions{display:flex;gap:8px}.room-action-btn{flex:1;padding:12px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.join-btn{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary)}.spectate-btn{background:#ffffff1a;color:var(--color-text-secondary)}.room-action-btn:active{transform:scale(.95)}.empty-state{text-align:center;padding:48px 24px}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-title{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--color-text-primary)}.empty-message{font-size:16px;color:var(--color-text-secondary);margin-bottom:24px}.game-mode-selector{display:flex;gap:12px;margin-bottom:24px;padding:4px;background:var(--color-surface-1);border-radius:12px}.mode-btn{flex:1;padding:12px;border:none;background:none;color:var(--color-text-secondary);font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.mode-btn.active{background:var(--color-bg-primary);color:var(--color-accent-primary);box-shadow:0 2px 8px #0003}.solo-practice-card{background:linear-gradient(135deg,#81c7841a,#66bb6a1a);border:1px solid rgba(129,199,132,.3);border-radius:16px;padding:24px;text-align:center;margin-bottom:24px}.solo-icon{font-size:48px;margin-bottom:16px}.solo-title{font-size:20px;font-weight:600;margin-bottom:8px}.solo-description{font-size:14px;color:var(--color-text-secondary);margin-bottom:16px}.solo-start-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.solo-start-btn:active{transform:scale(.95)}.quick-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.stat-card{background:var(--color-surface-1);border-radius:12px;padding:16px;text-align:center}.stat-value{font-size:24px;font-weight:700;color:var(--color-accent-primary);margin-bottom:4px}.stat-label{font-size:12px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}}.rank-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;position:relative;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);box-shadow:0 2px 8px #0000004d;transition:all .3s ease;overflow:hidden}.rank-badge:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--rank-color),transparent,var(--rank-color));border-radius:8px;opacity:.8;z-index:-1}.rank-badge-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px;gap:4px;background:#000000b3;border-radius:6px;width:100%;height:100%}.rank-badge-small{width:40px;height:40px;border-radius:50%}.rank-badge-small .rank-badge-inner{padding:4px}.rank-badge-small .rank-icon{font-size:20px}.rank-badge-medium{min-width:80px;height:60px}.rank-badge-medium .rank-icon{font-size:24px}.rank-badge-large{min-width:120px;min-height:100px;border-radius:12px}.rank-badge-large .rank-badge-inner{padding:16px 20px;gap:8px}.rank-badge-large .rank-icon{font-size:36px}.rank-badge-icon{display:flex;align-items:center;justify-content:center}.rank-icon{display:block;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.rank-badge-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}.rank-badge-large .rank-badge-label{font-size:14px}.rank-badge-rating{font-size:16px;font-weight:700;color:var(--rank-color);text-shadow:0 1px 2px rgba(0,0,0,.8)}.rank-badge-iron{--rank-color: #7C7C7C}.rank-badge-bronze{--rank-color: #CD7F32}.rank-badge-silver{--rank-color: #C0C0C0}.rank-badge-gold{--rank-color: #FFD700}.rank-badge-platinum{--rank-color: #E5E4E2}.rank-badge-diamond{--rank-color: #B9F2FF}.rank-badge-diamond:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200%;height:200%;background:radial-gradient(circle,rgba(185,242,255,.2) 0%,transparent 50%);animation:diamond-sparkle 3s ease-in-out infinite}@keyframes diamond-sparkle{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(.8)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.2)}}.rank-badge-master{--rank-color: #9B30FF}.rank-badge-grandmaster{--rank-color: #FF0000;background:linear-gradient(135deg,#2a0000,#4a0000)}.rank-badge-grandmaster:after{content:"";position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);animation:grandmaster-shine 3s infinite}@keyframes grandmaster-shine{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.rank-badge-animated{animation:rank-badge-pulse 2s ease-in-out infinite}@keyframes rank-badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.rank-badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0006}.rank-badge:hover:before{opacity:1}@media (prefers-color-scheme: dark){.rank-badge{background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.rank-badge-inner{background:#000c}}.rank-progress-container{display:flex;flex-direction:column;gap:12px;padding:16px;background:#0000001a;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.rank-progress-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.rank-progress-info{flex:1;display:flex;flex-direction:column;gap:4px}.rank-progress-tier{font-size:18px;font-weight:600;color:#fff}.rank-progress-rating{font-size:14px;color:#ffffffb3}.rank-progress-bar-container{display:flex;flex-direction:column;gap:8px}.rank-progress-bar{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;position:relative}.rank-progress-fill{height:100%;border-radius:4px;transition:width .5s ease-out;position:relative;overflow:hidden}.rank-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:progress-shine 2s linear infinite}.rank-progress-fill.animated{animation:progress-pulse 2s ease-in-out infinite}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes progress-pulse{0%,to{opacity:.8}50%{opacity:1}}.rank-progress-labels{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#fff9}.rank-progress-next{text-align:right;color:#fffc}.rank-progress-max-tier{text-align:center;font-size:14px;color:gold;font-weight:600;padding:8px;background:#ffd7001a;border-radius:8px}.rank-progress-container.compact{padding:12px 24px;background:#0003;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 20px 20px;margin-top:-1px}.rank-progress-container.compact .rank-progress-header{justify-content:center;gap:24px}.rank-progress-container.compact .rank-progress-info{flex:none;align-items:center;text-align:center}.rank-progress-container.compact .rank-progress-tier{font-size:14px}.rank-progress-container.compact .rank-progress-rating{font-size:12px}.rank-progress-container.compact .rank-progress-bar{height:6px}.rank-progress-container.compact .rank-progress-labels{font-size:11px}.rank-display{display:flex;align-items:center;gap:16px;color:#fff}.rank-display-compact{gap:8px}.rank-display-detailed{background:#0003;padding:12px 16px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.rank-display-stats{display:flex;gap:20px}.rank-stat{display:flex;flex-direction:column;gap:4px}.rank-stat-label{font-size:12px;color:#fff9;text-transform:uppercase;letter-spacing:.5px}.rank-stat-value{font-size:16px;font-weight:600;color:#fff}.rank-display-full{display:flex;flex-direction:column;background:linear-gradient(135deg,#1a1f2e,#2d3748);border-radius:20px;overflow:hidden;box-shadow:0 10px 40px #0000004d;width:100%;border:1px solid rgba(255,255,255,.1)}.rank-display-main{display:flex;padding:24px;gap:32px;align-items:center}.rank-badge-section{display:flex;align-items:center;gap:20px;flex-shrink:0}.rank-info{display:flex;flex-direction:column;gap:8px}.rank-tier-name{font-size:24px;font-weight:800;color:#fff;margin:0;text-transform:uppercase;letter-spacing:1px}.rank-rating-display{display:flex;align-items:baseline;gap:8px}.current-rating{font-size:36px;font-weight:900;color:gold;line-height:1}.rating-label{font-size:14px;color:#fff9;font-weight:600;text-transform:uppercase}.rank-stats-section{flex:1;display:flex;gap:40px;align-items:center;justify-content:space-around}.stat-group.performance{display:flex;align-items:center;gap:16px}.stat-box{text-align:center}.stat-box.wins .stat-number{color:#4ade80}.stat-box.losses .stat-number{color:#ef4444}.stat-number{font-size:42px;font-weight:900;line-height:1;display:block}.stat-label{font-size:12px;color:#fff9;text-transform:uppercase;letter-spacing:1px;margin-top:4px;display:block}.stat-divider{font-size:24px;color:#ffffff4d;font-weight:300}.stat-group.metrics{display:flex;gap:32px;align-items:center}.metric-item{display:flex;flex-direction:column;gap:8px}.metric-label{font-size:12px;color:#fff9;text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:20px;font-weight:700;color:#fff}.metric-value.peak{color:#a78bfa}.metric-value-bar{display:flex;flex-direction:column;gap:6px}.winrate-bar{width:100px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.winrate-fill{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e);border-radius:3px;transition:width .3s ease}@media (max-width: 768px){.rank-display-detailed{flex-direction:column;align-items:flex-start;gap:12px}.rank-display-stats{width:100%;justify-content:space-around}.rank-display-main{flex-direction:column;padding:20px;gap:24px}.rank-badge-section{width:100%;justify-content:center}.rank-stats-section{width:100%;flex-direction:column;gap:24px}.stat-group.performance{order:1}.stat-group.metrics{order:2;width:100%;justify-content:space-between;flex-wrap:wrap;gap:16px}.metric-item{flex:1;min-width:80px;align-items:center;text-align:center}.winrate-bar{width:80px}.stat-number{font-size:36px}.current-rating{font-size:32px}.rank-tier-name{font-size:20px}}.ranked-lobby{width:100%;max-width:1000px;margin:0 auto;padding:24px;background:linear-gradient(135deg,var(--color-surface-1) 0%,var(--color-surface-2) 100%);border-radius:24px;box-shadow:0 20px 60px #0003;border:1px solid rgba(255,255,255,.05)}.ranked-lobby-header{margin-bottom:24px;text-align:center;position:relative}.ranked-lobby-header h1{font-size:2em;color:var(--color-text-primary);margin-bottom:16px;font-weight:800;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(135deg,#fff,#ddd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.queue-tabs{display:inline-flex;background:#0003;padding:4px;border-radius:40px;gap:4px;margin-bottom:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.queue-tab{padding:10px 24px;font-size:.95em;font-weight:700;background:transparent;border:none;border-radius:36px;cursor:pointer;transition:all .2s ease;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.queue-tab:hover{color:#ffffffe6}.queue-tab.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;box-shadow:0 4px 12px #4a90e24d}.player-stats-section{margin-bottom:24px;display:flex;flex-direction:column;align-items:center;gap:16px}.player-rank-display{width:100%;max-width:800px}.placement-notice{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:8px;padding:12px 20px;color:var(--color-warning-text);font-weight:500}.auth-required-notice{text-align:center;padding:40px;background:var(--color-surface-2);border-radius:12px;margin-bottom:30px}.auth-required-notice p{font-size:1.2em;color:var(--color-text-secondary);margin-bottom:20px}.auth-button{padding:12px 30px;font-size:1.1em;font-weight:600;background:var(--color-primary);color:#fff;border:none;border-radius:30px;cursor:pointer;transition:all .3s ease}.auth-button:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #4a90e24d}.game-mode-section{margin-bottom:24px;background:#0000001a;padding:20px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-mode-section h3{text-align:center;color:var(--color-text-primary);margin-bottom:16px;font-size:1.1em;font-weight:600;text-transform:uppercase;letter-spacing:1px;opacity:.8}.queue-section{margin-bottom:24px}.queue-button{width:100%;padding:18px 24px;font-size:1.2em;font-weight:800;border:none;border-radius:16px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.queue-button.join-queue{background:linear-gradient(135deg,#4a90e2,#5ca0f2,#4a90e2);color:#fff;box-shadow:0 4px 15px #4a90e24d,inset 0 1px #fff3}.queue-button.join-queue:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 25px #4a90e266,inset 0 1px #fff3;background:linear-gradient(135deg,#5ca0f2,#6db0ff,#5ca0f2)}.queue-button.join-queue:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px #4a90e24d,inset 0 1px #fff3}.queue-button.join-queue:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#6b7280,#9ca3af)}.queue-button.leave-queue{background:#dc3545e6;color:#fff;margin-top:16px;font-size:1em;padding:14px 20px}.queue-button.leave-queue:hover{background:#dc3545;transform:translateY(-1px);box-shadow:0 4px 15px #dc354566}.queue-status{background:linear-gradient(135deg,#4a90e21a,#4a90e20d);border:1px solid rgba(74,144,226,.3);border-radius:16px;padding:24px;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.queue-info{display:flex;justify-content:space-around;align-items:center;gap:32px;margin-bottom:20px}.queue-time,.search-range,.estimated-wait{text-align:center}.queue-label{display:block;font-size:.9em;color:var(--color-text-secondary);margin-bottom:5px}.queue-value{display:block;font-size:1.5em;font-weight:700;color:var(--color-text-primary)}.queue-animation{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:5px}.queue-pulse{width:8px;height:8px;background:var(--color-primary);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}.queue-pulse:nth-child(1){animation-delay:0s}.queue-pulse:nth-child(2){animation-delay:.3s}.queue-pulse:nth-child(3){animation-delay:.6s}@keyframes pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}.match-history-section{margin-top:32px;background:#0000001a;padding:24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.match-history-section h3{color:var(--color-text-primary);margin-bottom:16px;font-size:1.1em;font-weight:600;text-transform:uppercase;letter-spacing:1px;opacity:.8}.match-history-list{display:flex;flex-direction:column;gap:8px}.match-history-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:12px 16px;background:#ffffff05;border-radius:12px;border:1px solid rgba(255,255,255,.05);border-left-width:3px;transition:all .2s ease}.match-history-item.win{border-left-color:#4ade80;background:#4ade800d}.match-history-item.loss{border-left-color:#ef4444;background:#ef44440d}.match-history-item:hover{background:#ffffff0d;transform:translate(2px)}.match-opponent{display:flex;align-items:center;gap:10px}.opponent-name{font-weight:600;color:var(--color-text-primary)}.opponent-rating{color:var(--color-text-secondary);font-size:.9em}.result-badge{padding:4px 12px;border-radius:20px;font-weight:600;font-size:.9em}.result-badge.win{background:var(--color-success-bg);color:var(--color-success-text)}.result-badge.loss{background:var(--color-danger-bg);color:var(--color-danger-text)}.rating-change{font-weight:700;font-size:1.1em}.rating-change.positive{color:var(--color-success)}.rating-change.negative{color:var(--color-danger)}.match-time{color:var(--color-text-secondary);font-size:.9em;text-align:right}.loading-stats{text-align:center;padding:40px;color:var(--color-text-secondary);font-style:italic}.queue-time .queue-value{color:#4ade80;font-weight:900}.search-range .queue-value{color:#fbbf24;font-weight:900}.estimated-wait .queue-value{color:#60a5fa;font-weight:900}.queue-animation{position:absolute;bottom:8px;left:50%;transform:translate(-50%);display:flex;gap:6px}.queue-pulse{width:6px;height:6px;background:linear-gradient(135deg,#4a90e2,#60a5fa);border-radius:50%;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 10px #4a90e280}.opponent-name{font-weight:700;font-size:.95em}.opponent-rating{font-weight:600;opacity:.7}.result-badge{padding:3px 10px;border-radius:16px;font-weight:700;font-size:.85em;text-transform:uppercase;letter-spacing:.5px}.result-badge.win{background:linear-gradient(135deg,#4ade8033,#4ade801a);color:#4ade80;border:1px solid rgba(74,222,128,.3)}.result-badge.loss{background:linear-gradient(135deg,#ef444433,#ef44441a);color:#ef4444;border:1px solid rgba(239,68,68,.3)}.rating-change{font-weight:900;font-size:1em}.match-time{font-size:.85em;opacity:.6}@media (max-width: 768px){.ranked-lobby{padding:16px;border-radius:20px}.ranked-lobby-header h1{font-size:1.5em;letter-spacing:1px}.queue-tabs{display:flex;flex-direction:row;width:100%;max-width:300px;margin:0 auto 20px}.queue-tab{flex:1;padding:8px 16px;font-size:.85em}.queue-info{flex-direction:column;gap:16px}.queue-time,.search-range,.estimated-wait{display:flex;justify-content:space-between;align-items:center;width:100%}.queue-label{font-size:.85em}.queue-value{font-size:1.2em}.match-history-item{grid-template-columns:1fr;gap:8px;padding:10px 12px}.match-opponent,.match-result{display:flex;justify-content:space-between;width:100%}.match-time{text-align:right;font-size:.8em}.game-mode-section,.match-history-section{padding:16px}.queue-button{padding:16px 20px;font-size:1.1em}.queue-button.leave-queue{padding:12px 16px;font-size:.9em}}.badge-showcase{background:var(--card-bg, #f8f9fa);border-radius:12px;padding:20px;margin:20px 0;box-shadow:0 2px 8px #0000001a}.badge-showcase.loading{text-align:center;color:var(--text-secondary, #666);padding:40px}.showcase-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.showcase-header h3{margin:0;color:var(--text-primary, #333);font-size:1.2rem}.edit-button{padding:6px 16px;background:var(--primary-color, #4CAF50);color:var(--color-text-primary);border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s}.edit-button:hover{background:var(--primary-hover, #45a049)}.player-stats{display:flex;gap:30px;margin-bottom:20px;padding:15px;background:#0000000d;border-radius:8px}.stat-label{font-size:.85rem;color:var(--text-secondary, #666);margin-bottom:5px}.stat-value{font-size:1.2rem;font-weight:700;color:var(--text-primary, #333)}.stat-value.level{color:var(--success-color, #4CAF50)}.stat-value.points{color:var(--warning-color, #ff9800)}.featured-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.featured-badge{display:flex;align-items:center;gap:15px;padding:15px;background:var(--color-surface-1);border-radius:8px;border:2px solid transparent;transition:all .2s}.featured-badge.common{border-color:#b0bec5}.featured-badge.rare{border-color:#42a5f5;background:linear-gradient(135deg,rgba(66,165,245,.1) 0%,var(--color-surface-1) 100%)}.featured-badge.epic{border-color:#ab47bc;background:linear-gradient(135deg,rgba(171,71,188,.1) 0%,var(--color-surface-1) 100%)}.featured-badge.legendary{border-color:#ffa726;background:linear-gradient(135deg,rgba(255,167,38,.1) 0%,var(--color-surface-1) 100%);box-shadow:0 0 20px #ffa7264d}.badge-icon{font-size:2.5rem;line-height:1;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.badge-image{width:100%;height:100%;object-fit:contain;border-radius:50%}.badge-name{font-weight:600;color:var(--text-primary, #333);margin-bottom:5px}.badge-tier{font-size:.85rem;color:var(--text-secondary, #666)}.empty-showcase{text-align:center;padding:40px;color:var(--text-secondary, #666)}.select-badges-button{margin-top:15px;padding:8px 20px;background:var(--primary-color, #4CAF50);color:var(--color-text-primary);border:none;border-radius:6px;cursor:pointer;transition:background .2s}.select-badges-button:hover{background:var(--primary-hover, #45a049)}.badge-showcase.compact{padding:10px 15px;margin:10px 0;background:#0000000d}.badge-showcase.compact .showcase-header{margin-bottom:10px;gap:15px}.level-indicator,.points-indicator{font-weight:700;font-size:.9rem}.level-indicator{color:var(--success-color, #4CAF50)}.points-indicator{color:var(--warning-color, #ff9800)}.featured-badges-row{display:flex;gap:10px;align-items:center}.showcase-badge{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;position:relative;border:2px solid;background:var(--color-surface-1);cursor:help;transition:transform .2s ease}.showcase-badge:hover{transform:scale(1.1);z-index:10}.showcase-badge.common{border-color:#b0bec5}.showcase-badge.rare{border-color:#42a5f5}.showcase-badge.epic{border-color:#ab47bc;background:linear-gradient(135deg,rgba(171,71,188,.1) 0%,var(--color-surface-1) 100%)}.showcase-badge.legendary{border-color:#ffa726;box-shadow:0 0 10px #ffa72666;animation:legendary-glow 2s ease-in-out infinite}@keyframes legendary-glow{0%,to{box-shadow:0 0 10px #ffa72666}50%{box-shadow:0 0 20px #ffa72699,0 0 30px #ffa7264d}}.badge-emoji{font-size:1.5rem;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tier-indicator{position:absolute;bottom:-5px;right:-5px;background:var(--primary-color, #4CAF50);color:var(--color-text-primary);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.no-badges{color:var(--text-secondary, #666);font-style:italic;font-size:.9rem}.badge-selector-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080}.modal-content{position:relative;background:var(--color-surface-1);border-radius:12px;padding:30px;max-width:800px;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px #0003;z-index:1001}.modal-content h3{margin:0 0 10px;color:var(--text-primary, #333)}.selector-hint{color:var(--text-secondary, #666);margin-bottom:20px}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;margin-bottom:30px}.selectable-badge{padding:15px;border-radius:8px;border:2px solid #ddd;cursor:pointer;transition:all .2s;text-align:center;position:relative;background:var(--color-surface-1);pointer-events:auto;-webkit-user-select:none;user-select:none}.selectable-badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.selectable-badge.selected{border-color:var(--primary-color, #4CAF50);background:#4caf501a}.selectable-badge .badge-icon{font-size:2rem;margin-bottom:8px}.selectable-badge .badge-name{font-size:.85rem;font-weight:500;color:var(--text-primary, #333);margin-bottom:4px}.selectable-badge .badge-tier{font-size:.75rem;color:var(--text-secondary, #666)}.selection-indicator{position:absolute;top:5px;right:5px;width:24px;height:24px;background:var(--primary-color, #4CAF50);color:var(--color-text-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.cancel-button,.save-button{padding:10px 24px;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s}.cancel-button{background:#e0e0e0;color:#333}.cancel-button:hover{background:#d0d0d0}.save-button{background:var(--primary-color, #4CAF50);color:var(--color-text-primary)}.save-button:hover{background:var(--primary-hover, #45a049)}.badge-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);background:var(--color-surface-elevated, #fff);border:1px solid var(--color-border, #ddd);border-radius:8px;padding:12px;min-width:200px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;box-shadow:0 4px 12px #00000026;z-index:100;pointer-events:none}.showcase-badge:hover .badge-tooltip{opacity:1;visibility:visible}.badge-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--color-surface-elevated, #fff)}.tooltip-header{font-weight:600;font-size:.95rem;margin-bottom:6px;color:var(--text-primary, #333)}.tooltip-description{font-size:.85rem;color:var(--text-secondary, #666);margin-bottom:8px;line-height:1.4}.tooltip-rarity{font-size:.8rem;font-weight:500;margin-bottom:4px;text-transform:capitalize}.tooltip-tier{font-size:.8rem;color:var(--primary-color, #4CAF50);font-weight:500}.showcase-badge.rare .tooltip-rarity{color:#42a5f5}.showcase-badge.epic .tooltip-rarity{color:#ab47bc}.showcase-badge.legendary .tooltip-rarity{color:#ffa726}@media (max-width: 768px){.player-stats{flex-direction:column;gap:15px}.featured-badges-grid{grid-template-columns:1fr}.badge-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.modal-content{margin:20px;padding:20px}.badge-tooltip{display:none}}.waiting-room{max-width:800px;margin:0 auto;padding:var(--space-6);text-align:center}.waiting-room h2{color:var(--color-text-primary);margin-bottom:var(--space-6);font-size:var(--text-2xl);font-weight:var(--font-bold);font-family:var(--font-primary)}.title-mobile,.room-info-mobile,.vs-mobile,.btn-text-mobile,.countdown-mobile{display:none}.title-full,.room-info-full,.vs-full,.btn-text-full,.countdown-full{display:inline}.players-section{display:flex;justify-content:center;align-items:center;gap:var(--space-8);margin:var(--space-8) 0}.player-card{background-color:var(--color-surface-1);border:1px solid var(--color-border-default);padding:var(--space-6);border-radius:var(--radius-xl);min-width:240px;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.player-card .badge-showcase{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);background:#00000008;border-radius:var(--radius-md)}.player-card .badge-showcase.compact{box-shadow:none}.player-card .showcase-badge{transition:all .3s ease}.player-card .showcase-badge:hover{transform:scale(1.1)}.player-card .showcase-badge.legendary{transform:scale(1.05)}.player-card .tier-indicator{animation:pulse 2s ease-in-out infinite}.player-card:hover{border-color:var(--color-border-strong);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.player-card h3{margin-bottom:var(--space-4);color:var(--color-text-primary);font-size:var(--text-xl);font-weight:var(--font-semibold)}.ready-status{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-weight:var(--font-bold);text-transform:uppercase;font-size:var(--text-sm);letter-spacing:.05em}.ready-status.ready{background-color:#62976033;color:var(--color-success);border:1px solid rgba(98,151,96,.3)}.ready-status.not-ready{background-color:#ca343133;color:var(--color-error);border:1px solid rgba(202,52,49,.3)}.ready-status.waiting{background-color:#f0c45c33;color:var(--color-accent-gold);border:1px solid rgba(240,196,92,.3)}.vs{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-accent-gold);text-transform:uppercase;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.countdown{margin:var(--space-6) 0;animation:pulse 1s infinite}.countdown h2{color:var(--color-accent-primary);font-size:var(--text-3xl);font-weight:var(--font-bold);text-shadow:0 0 20px rgba(129,199,132,.5)}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:1}}.room-actions{display:flex;justify-content:center;gap:var(--space-4);margin:var(--space-6) 0}.ready-btn{padding:var(--space-4) var(--space-6);font-size:var(--text-lg);background:linear-gradient(135deg,var(--color-error),#dc2626);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-md)}.ready-btn.ready{background:linear-gradient(135deg,var(--color-success),#4ade80)}.ready-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.ready-btn:active{transform:translateY(0)}.leave-btn{padding:var(--space-4) var(--space-6);font-size:var(--text-base);background-color:var(--color-surface-2);color:var(--color-text-primary);border:2px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em}.leave-btn:hover{background-color:var(--color-surface-3);border-color:var(--color-border-strong);transform:translateY(-2px)}.waiting-message{margin-top:var(--space-8);padding:var(--space-6);background-color:var(--color-surface-1);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.waiting-message p{margin-bottom:var(--space-4);color:var(--color-text-secondary);font-size:var(--text-base)}.room-code-display{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-accent-gold);letter-spacing:.2em;padding:var(--space-4);background-color:var(--color-bg-tertiary);border:2px solid var(--color-accent-gold);border-radius:var(--radius-lg);display:inline-block;box-shadow:0 0 20px #f0c45c33;font-family:var(--font-mono)}@media (max-width: 768px){.waiting-room{padding:var(--space-4)}.waiting-room h2{font-size:var(--text-xl);margin-bottom:var(--space-4)}.title-mobile,.room-info-mobile,.vs-mobile,.btn-text-mobile,.countdown-mobile{display:inline}.title-full,.room-info-full,.vs-full,.btn-text-full,.countdown-full{display:none}.countdown-mobile{font-size:var(--text-4xl);font-weight:var(--font-bold)}.players-section{flex-direction:column;gap:var(--space-3);margin:var(--space-4) 0}.player-card{min-width:200px;padding:var(--space-4)}.player-card h3{font-size:var(--text-lg)}.player-card .badge-showcase{margin-top:var(--space-2);padding:var(--space-2) var(--space-3)}.player-card .badge-showcase .showcase-badge{width:32px;height:32px}.player-card .badge-showcase .badge-emoji{font-size:1.2rem}.ready-status{font-size:var(--text-sm)}.vs{font-size:var(--text-xl);margin:var(--space-2) 0}.room-actions{flex-direction:column;width:100%;max-width:300px;margin:var(--space-4) auto;gap:var(--space-3)}.ready-btn,.leave-btn{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base)}.room-code-display{font-size:var(--text-2xl);padding:var(--space-3)}.waiting-message p{font-size:var(--text-sm)}}@media (max-width: 480px){.waiting-room h2{font-size:var(--text-xl)}.player-card{min-width:160px}.room-code-display{font-size:var(--text-xl);letter-spacing:.1em}}.card-wrapper .card{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff!important;border:2px solid rgba(0,0,0,.1)!important;border-radius:16px!important;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;overflow:hidden;padding:0!important;margin:0!important;box-sizing:border-box}.card-wrapper .card:before,.card-wrapper .card:after{display:none!important}.card.small{font-size:40px}.card.medium{font-size:56px}.card.large{font-size:80px}.card .card-value{font-weight:700;color:#1a1a1a;z-index:2;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;letter-spacing:-.02em;position:relative;font-size:inherit!important;width:auto!important;height:auto!important;line-height:1;background:transparent!important;box-shadow:none!important;text-shadow:none!important}.card .card-value:before,.card .card-value:after{display:none!important;background:none!important}.card-wrapper .card[style*="--card-color: #ff6b6b"]{background:#fff8f8!important;border:2px solid rgba(255,107,107,.3)!important}.card-wrapper .card[style*="--card-color: #ff6b6b"] .card-value{color:#ff4757}.card-wrapper .card[style*="--card-color: #4ecdc4"]{background:#f8fffe!important;border:2px solid rgba(78,205,196,.3)!important}.card-wrapper .card[style*="--card-color: #4ecdc4"] .card-value{color:#00b8a9}.card-wrapper .card:hover:not(.disabled){transform:translateY(-4px);border-color:#0003!important}.card-wrapper .card:active:not(.disabled){transform:translateY(-1px)}.card-wrapper .card.selected{transform:translateY(-6px);border:3px solid #81c784!important;transition:all .15s ease}.card.selected:after{content:"✓";position:absolute;top:8px;right:8px;width:24px;height:24px;background:linear-gradient(135deg,#81c784,#66bb6a);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;animation:checkIn .2s cubic-bezier(.68,-.55,.265,1.55);z-index:3}@keyframes checkIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.card.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.8) brightness(1.1)}.card.disabled:hover{transform:none}.card-owner{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:11px;color:#00000080;background:#0000000a;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;z-index:2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.keyboard-shortcut{position:absolute;top:8px;right:8px;font-size:11px;color:#0006;background:#0000000f;padding:2px 6px;border-radius:8px;font-weight:600;font-family:SF Mono,Monaco,Consolas,monospace;opacity:0;transition:all .2s ease;min-width:20px;text-align:center;z-index:2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.card:hover .keyboard-shortcut{opacity:1;background:#00000014}.card.selected .keyboard-shortcut{background:linear-gradient(135deg,#81c784,#66bb6a);color:#fff;opacity:1;box-shadow:0 2px 4px #0000001a}.card.keyboard-focused{animation:keyboardPulse .3s ease-out;box-shadow:0 0 0 4px #81c78466,var(--shadow-lg);border-color:var(--color-accent-primary)}@keyframes keyboardPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes dealCard{0%{transform:translateY(-30px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.card.dealing{animation:dealCard .3s cubic-bezier(.4,0,.2,1)}@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.card.flipping{animation:cardFlip .4s ease-in-out}@media (max-width: 768px){.card.large{font-size:44px}.card.medium{font-size:32px}.card.small{font-size:24px}.keyboard-shortcut{font-size:10px;padding:1px 4px}.card.selected:after{width:20px;height:20px;font-size:12px}}@media (max-width: 480px){.card.large{font-size:36px}.card.medium{font-size:28px}.card.small{font-size:20px}}.operation-menu{position:fixed;z-index:1000;animation:fadeInScale .2s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.operation-menu-inner{background:#1a1a2efa;border:3px solid #4ecdc4;border-radius:20px;padding:15px;box-shadow:0 8px 32px #4ecdc480;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;gap:10px;align-items:center;justify-content:center}.operation-btn{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0}.operation-btn:hover{background:#4ecdc44d;border-color:#4ecdc4;transform:scale(1.1);box-shadow:0 4px 16px #4ecdc466}.operation-btn:active{transform:scale(.95)}@media (max-width: 768px){.operation-menu-inner{padding:10px;gap:8px}.operation-btn{font-size:20px;width:40px;height:40px}}.keyboard-help-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.keyboard-help-content{background:#fff;border-radius:12px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 30px #0000004d;animation:slideIn .3s ease-out}.keyboard-help-content h3{margin:0 0 1.5rem;color:#333;text-align:center;font-size:1.5rem}.help-section{margin-bottom:1.5rem}.help-section h4{margin:0 0 .75rem;color:#555;font-size:1.1rem;border-bottom:1px solid #eee;padding-bottom:.5rem}.help-item{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem;padding:.5rem;border-radius:6px;transition:background-color .2s}.help-item:hover{background-color:#f5f5f5}.help-item kbd{background-color:#f4f4f4;border:1px solid #ccc;border-radius:4px;padding:.2rem .5rem;font-family:monospace;font-size:.9rem;box-shadow:0 2px 2px #0000001a;min-width:30px;text-align:center;display:inline-block}.help-item span{color:#666;font-size:.95rem}.close-help-btn{width:100%;padding:.75rem;background-color:#2196f3;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s;margin-top:1rem}.close-help-btn:hover{background-color:#1976d2}@media (max-width: 768px){.keyboard-help-content{padding:1.5rem;width:95%}.help-item{flex-direction:column;align-items:flex-start;gap:.5rem}}.interactive-center-table{width:100%;max-width:600px;margin:0 auto}.table-surface{background:linear-gradient(135deg,#2d5a2d,#1e3c1e);border:3px solid #ffd700;border-radius:15px;padding:2rem;box-shadow:0 8px 32px #0000004d;position:relative}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.table-header h3{margin:0;color:gold;font-size:1.5rem;text-align:center;flex:1}.reset-btn{position:absolute;right:1rem;top:1rem;padding:.5rem 1rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:5px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s ease}.reset-btn:hover{background:#fff3;border-color:gold;transform:translateY(-2px)}.center-cards.interactive{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;min-height:200px;justify-items:center;align-items:center;max-width:320px;margin:0 auto}.card-wrapper{position:relative;cursor:pointer;width:126px;height:162px}@keyframes pulse-border{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}.card-expression{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);background:#000c;color:gold;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;white-space:nowrap;font-family:monospace}.result-indicator{margin-top:1.5rem;text-align:center;font-size:1.5rem;font-weight:700;padding:.5rem 1rem;border-radius:8px;animation:fadeIn .3s ease}.result-indicator.success{color:#28a745;background:#28a7451a;border:2px solid #28a745}.result-indicator.continue{color:gold;background:#ffd7001a;border:2px solid #ffd700}.no-cards{color:#ffffff80;font-style:italic;text-align:center;padding:2rem}.card-wrapper.merging-out{animation:mergeOut .2s ease-out forwards;pointer-events:none}@keyframes mergeOut{0%{transform:scale(1) translate(0);opacity:1}to{transform:scale(.5) translate(var(--merge-x, 0),var(--merge-y, 0));opacity:0}}.card-wrapper:not(.merging-out){animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.table-surface{padding:1.5rem}.table-header h3{font-size:1.2rem}.reset-btn{padding:.4rem .8rem;font-size:.8rem}.center-cards.interactive{gap:15px;grid-template-columns:repeat(2,1fr);max-width:250px}.card-wrapper{width:90px;height:121px}.card-expression{font-size:.7rem;bottom:-20px}.result-indicator{font-size:1.2rem}}.keyboard-hint{text-align:center;margin-top:1rem;font-size:.9rem;color:#666;opacity:.8;transition:opacity .3s}.keyboard-hint:hover{opacity:1}.keyboard-hint kbd{background-color:#f4f4f4;border:1px solid #ccc;border-radius:3px;padding:.1rem .4rem;font-family:monospace;font-size:.85rem;box-shadow:0 1px 2px #0000001a}@media (max-width: 768px){.interactive-center-table{max-width:100%}.table-surface{padding:1rem}.center-cards{max-height:none!important;overflow:visible!important}.center-cards .card{width:60px!important;height:85px!important;font-size:22px!important}.center-cards.cards-8 .card{width:50px!important;height:70px!important;font-size:18px!important}}.game-over-enhanced{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity .6s ease-in-out}.game-over-enhanced.visible{opacity:1}.fireworks-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.celebration-container{position:relative;z-index:2;background:linear-gradient(135deg,#1e1e2e,#2d2d44);border-radius:24px;padding:48px;max-width:900px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080,0 0 100px #ffffff1a;animation:slideIn .8s ease-out}.celebration-container.victory{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);box-shadow:0 20px 60px #ffd7004d,0 0 100px #ffd70033}.celebration-container.defeat{background:linear-gradient(135deg,#2d1b1b,#3d2424,#4a2c2c);box-shadow:0 20px 60px #dc143c33,0 0 100px #dc143c1a}@keyframes slideIn{0%{transform:translateY(100px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.trophy-container{position:relative;margin-bottom:32px;text-align:center}.trophy{font-size:120px;display:inline-block;animation:bounce 1s ease-out,glow 2s ease-in-out infinite alternate}.trophy.gold{filter:drop-shadow(0 0 30px #ffd700)}.trophy.silver{filter:drop-shadow(0 0 20px #c0c0c0)}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0) rotate(0)}10%{transform:translateY(-30px) rotate(-5deg)}30%{transform:translateY(-15px) rotate(5deg)}60%{transform:translateY(-10px) rotate(-3deg)}90%{transform:translateY(-5px) rotate(3deg)}}@keyframes glow{0%{filter:brightness(1) drop-shadow(0 0 20px currentColor)}to{filter:brightness(1.2) drop-shadow(0 0 40px currentColor)}}.sparkles{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;pointer-events:none}.sparkle{position:absolute;font-size:24px;animation:sparkle 3s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}.sparkle-1{top:0;left:50%;animation-delay:0s}.sparkle-2{top:20%;right:20%;animation-delay:.2s}.sparkle-3{top:50%;right:0;animation-delay:.4s}.sparkle-4{bottom:20%;right:20%;animation-delay:.6s}.sparkle-5{bottom:0;left:50%;animation-delay:.8s}.sparkle-6{bottom:20%;left:20%;animation-delay:1s}.sparkle-7{top:50%;left:0;animation-delay:1.2s}.sparkle-8{top:20%;left:20%;animation-delay:1.4s}.sparkle-9{top:10%;left:80%;animation-delay:1.6s}.sparkle-10{top:80%;left:10%;animation-delay:1.8s}.sparkle-11{top:80%;right:10%;animation-delay:2s}.sparkle-12{top:10%;right:80%;animation-delay:2.2s}.result-header{text-align:center;margin-bottom:40px}.result-title{font-size:64px;font-weight:900;margin:0;letter-spacing:8px;background:linear-gradient(45deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2s ease-in-out infinite}.defeat .result-title{background:linear-gradient(45deg,#dc143c,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.result-subtitle{font-size:20px;color:#b0b0c0;margin-top:16px;animation:fadeIn 1s ease-out .5s both}.battle-report{opacity:0;transform:translateY(20px);transition:all .8s ease-out}.battle-report.show{opacity:1;transform:translateY(0)}.battle-report h2{text-align:center;font-size:32px;margin-bottom:32px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}.score-overview{display:flex;align-items:center;justify-content:center;gap:40px;margin-bottom:48px;padding:24px;background:#0000004d;border-radius:16px}.player-final-score{display:flex;align-items:center;gap:16px}.player-avatar{font-size:48px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.player-info{display:flex;flex-direction:column;align-items:flex-start}.player-name{font-size:18px;color:#a0a0b0;margin-bottom:4px}.final-score{font-size:28px;font-weight:700;color:#fff}.vs-separator{font-size:24px;font-weight:700;color:#666}.stats-grid-enhanced{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:32px}.stat-category{background:#ffffff0d;border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.stat-category:hover{background:#ffffff14;transform:translateY(-2px);box-shadow:0 8px 24px #0003}.stat-category h3{font-size:20px;margin-bottom:16px;color:#fff;display:flex;align-items:center;gap:8px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.stat-row:last-child{border-bottom:none}.stat-label{font-size:14px;color:#a0a0b0}.stat-value{font-size:18px;font-weight:700;color:#fff}.stat-value.highlight{color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}.stat-value.trophy{color:#4ecdc4;text-shadow:0 0 10px rgba(78,205,196,.5)}.stat-value.success{color:#4ade80}.stat-value.danger{color:#f87171}.achievements{background:#ffffff0d;border-radius:12px;padding:24px;margin-bottom:32px}.achievements h3{font-size:24px;margin-bottom:20px;text-align:center;color:#fff}.achievement-list{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.achievement-badge{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:50px;border:2px solid rgba(255,255,255,.2);animation:badgeAppear .5s ease-out}@keyframes badgeAppear{0%{transform:scale(0) rotate(180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.achievement-badge.speed{border-color:gold;background:linear-gradient(135deg,#ffd70033,#ffd7001a)}.achievement-badge.accuracy{border-color:#4ecdc4;background:linear-gradient(135deg,#4ecdc433,#4ecdc41a)}.achievement-badge.quick{border-color:#ff6b6b;background:linear-gradient(135deg,#ff6b6b33,#ff6b6b1a)}.achievement-badge.winner{border-color:#a855f7;background:linear-gradient(135deg,#a855f733,#a855f71a)}.badge-icon{font-size:24px}.badge-text{font-size:16px;font-weight:600;color:#fff}.ranked-rating-section{margin:32px 0;opacity:0;transform:translateY(20px);transition:all .6s ease-out}.ranked-rating-section.animate{opacity:1;transform:translateY(0)}.rating-change-container{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}.rating-change-card{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:2px solid rgba(255,255,255,.2);border-radius:20px;padding:24px 32px;min-width:280px;position:relative;overflow:hidden;transition:all .3s ease}.rating-change-card.winner{border-color:#4ade80;background:linear-gradient(135deg,#4ade801a,#4ade800d);animation:winnerPulse 2s ease-in-out infinite}.rating-change-card.loser{border-color:#ef4444;background:linear-gradient(135deg,#ef44441a,#ef44440d)}@keyframes winnerPulse{0%,to{box-shadow:0 0 20px #4ade804d}50%{box-shadow:0 0 40px #4ade8080}}.player-rating-info{text-align:center}.player-label{display:block;font-size:1.2em;font-weight:600;color:#ffffffe6;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.rating-display{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;font-size:1.8em;font-weight:700}.old-rating{color:#ffffff80;position:relative}.rating-arrow{color:#ffffff4d;font-size:.8em}.new-rating{color:#fff;position:relative;animation:ratingSlideIn .6s ease-out .3s both}@keyframes ratingSlideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.rating-delta{display:flex;align-items:center;justify-content:center;gap:4px;font-size:2.5em;font-weight:900;animation:deltaBounce .8s ease-out .6s both}.rating-delta.positive{color:#4ade80}.rating-delta.negative{color:#ef4444}.delta-sign{font-size:.8em}.delta-value{font-variant-numeric:tabular-nums}.delta-label{font-size:.5em;font-weight:600;opacity:.8;margin-left:4px}@keyframes deltaBounce{0%{opacity:0;transform:scale(.3) translateY(20px)}50%{transform:scale(1.1) translateY(-5px)}70%{transform:scale(.95) translateY(2px)}to{opacity:1;transform:scale(1) translateY(0)}}.action-buttons{display:flex;gap:16px;justify-content:center;margin-top:32px}.action-button{display:flex;align-items:center;gap:8px;padding:16px 32px;font-size:18px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;color:#fff;position:relative;overflow:hidden}.action-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.action-button:hover:before{width:300px;height:300px}.rematch-btn{background:linear-gradient(135deg,#4ecdc4,#44a39a);box-shadow:0 4px 20px #4ecdc466}.rematch-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px #4ecdc499}.home-btn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 20px #667eea66}.home-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px #667eea99}.button-icon{font-size:20px}.rematch-waiting{text-align:center;padding:20px}.waiting-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-top-color:#4ecdc4;border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.rematch-waiting p{color:#a0a0b0;margin:8px 0}.opponent-ready{color:#4ade80!important;font-weight:600;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (max-width: 768px){.celebration-container{padding:24px;width:95%}.result-title{font-size:48px;letter-spacing:4px}.trophy{font-size:80px}.score-overview{flex-direction:column;gap:24px}.rating-change-container{flex-direction:column;width:100%}.rating-change-card{width:100%;min-width:unset;padding:20px 24px}.rating-display{font-size:1.5em}.rating-delta{font-size:2em}.stats-grid-enhanced{grid-template-columns:1fr;gap:16px}.action-buttons{flex-direction:column;width:100%}.action-button{width:100%}}.celebration-container::-webkit-scrollbar{width:8px}.celebration-container::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.celebration-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.celebration-container::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.unlocked-badges{margin-top:32px;padding:24px;background:#ffffff0d;border-radius:16px;border:1px solid rgba(255,255,255,.1)}.unlocked-badges h3{font-size:20px;margin-bottom:16px;color:gold;text-align:center;text-transform:uppercase;letter-spacing:2px}.badge-list{display:flex;flex-direction:column;gap:12px}.unlocked-badge{display:flex;align-items:center;gap:16px;padding:12px;background:#ffffff14;border-radius:12px;border:1px solid rgba(255,255,255,.15);transition:all .3s ease}.unlocked-badge:hover{background:#ffffff1f;transform:translate(4px)}.unlocked-badge .badge-icon{font-size:36px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.badge-icon.tier-bronze{filter:sepia(1) saturate(2) hue-rotate(25deg)}.badge-icon.tier-silver{filter:grayscale(.5) brightness(1.2)}.badge-icon.tier-gold{filter:sepia(1) saturate(2) hue-rotate(45deg) brightness(1.2)}.badge-icon.tier-platinum{filter:brightness(1.5) contrast(1.2)}.badge-icon.tier-diamond{filter:hue-rotate(200deg) brightness(1.3) saturate(1.5)}.badge-info{flex:1;display:flex;flex-direction:column;gap:4px}.badge-name{font-size:16px;font-weight:600;color:#fff}.badge-description{font-size:14px;color:#ffffffb3}.badge-points{font-size:14px;color:#4caf50;font-weight:500}.card-transfer-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:500}.transferring-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:forwards}.transferring-card.top{animation-name:transferToTop}.transferring-card.bottom{animation-name:transferToBottom}@keyframes transferToTop{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-350%) scale(.5);opacity:0}}@keyframes transferToBottom{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,250%) scale(.5);opacity:0}}.transferring-card:nth-child(1){left:calc(50% - 30px)}.transferring-card:nth-child(2){left:calc(50% - 10px)}.transferring-card:nth-child(3){left:calc(50% + 10px)}.transferring-card:nth-child(4){left:calc(50% + 30px)}.solution-replay-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);will-change:opacity;pointer-events:all}.solution-replay-container{background:linear-gradient(135deg,#1e3c72,#2a5298);border-radius:20px;padding:40px;min-width:600px;max-width:90%;box-shadow:0 20px 60px #00000080,0 0 100px #ffffff1a;border:2px solid rgba(255,255,255,.2)}.replay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.replay-header h2{margin:0;font-size:32px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);letter-spacing:1px}.replay-controls{display:flex;gap:10px}.control-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 16px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-btn:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.skip-btn{background:#ffaa004d;border-color:#ffaa0080}.skip-btn:hover{background:#fa06}.waiting-message{color:gold;font-size:16px;padding:10px 20px;background:#ffd70033;border-radius:8px;border:1px solid rgba(255,215,0,.4);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.8;box-shadow:0 0 10px #ffd7004d}50%{opacity:1;box-shadow:0 0 20px #ffd70080}}.replay-content{display:flex;flex-direction:column;align-items:center;gap:30px;min-height:400px}.cards-row{display:flex;gap:20px;margin-bottom:20px}.replay-card{width:80px;height:110px;background:linear-gradient(135deg,#fff,#f0f0f0);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#333;box-shadow:0 4px 20px #0000004d;transition:all .3s ease;position:relative;overflow:hidden}.replay-card.highlighted{background:linear-gradient(135deg,gold,#ffed4e);box-shadow:0 0 30px #ffd70099,0 4px 20px #0000004d;animation:pulse 1s ease-in-out infinite}.replay-card.used{transform:scale(.9);filter:grayscale(100%)}@keyframes pulse{0%,to{transform:scale(1.2)}50%{transform:scale(1.1)}}.card-value{position:relative;z-index:1}.operations-display{min-height:80px;display:flex;align-items:center;justify-content:center}.operation-step{background:#ffffff1a;border-radius:16px;padding:20px 40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.calculation{display:flex;align-items:center;gap:20px;font-size:48px;color:#fff;font-weight:700}.operand{min-width:60px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.3)}.operator{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:36px;box-shadow:0 4px 12px #0000004d;animation:operatorAppear .3s ease-out}@keyframes operatorAppear{0%{transform:scale(0) rotate(180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.operator-green{background:linear-gradient(135deg,#4ade80,#22c55e)}.operator-blue{background:linear-gradient(135deg,#60a5fa,#3b82f6)}.operator-orange{background:linear-gradient(135deg,#fb923c,#f97316)}.operator-red{background:linear-gradient(135deg,#f87171,#ef4444)}.equals{display:flex;align-items:center;gap:10px;margin-left:10px;color:#fff}.result{font-size:56px;color:gold;text-shadow:0 0 20px rgba(255,215,0,.5);animation:resultPop .4s ease-out}@keyframes resultPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.results-history{display:flex;gap:15px;margin-top:20px;min-height:60px}.result-bubble{width:60px;height:60px;background:#ffffff26;border:2px solid rgba(255,215,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:gold;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:bubbleAppear .4s ease-out}@keyframes bubbleAppear{0%{transform:scale(0) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.final-result{text-align:center;margin-top:30px}.equals-24{font-size:72px;font-weight:700;color:gold;text-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,215,0,.4);display:block;animation:finalReveal .6s ease-out}@keyframes finalReveal{0%{transform:scale(0) rotate(360deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.success-message{font-size:28px;color:#4ade80;margin-top:10px;font-weight:600;text-shadow:0 2px 10px rgba(74,222,128,.5);animation:fadeInUp .5s ease-out .3s both}@media (max-width: 768px){.solution-replay-container{padding:20px;min-width:unset;width:95%}.replay-header h2{font-size:24px}.cards-row{gap:10px}.replay-card{width:60px;height:85px;font-size:28px}.calculation{font-size:32px;gap:15px}.operator{width:50px;height:50px;font-size:28px}.result{font-size:40px}.equals-24{font-size:48px}.success-message{font-size:20px}}@media (prefers-reduced-motion: reduce){.replay-card,.operation-step,.result-bubble,.final-result,.operator{animation:none!important;transition:opacity .2s ease!important}}.victory-celebration{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center}.victory-celebration.visible{opacity:1}.victory-message{z-index:1001}.message-content{background:linear-gradient(135deg,gold,orange);padding:2rem 4rem;border-radius:20px;box-shadow:0 10px 40px #ffd70066,0 0 100px #ffd70033;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55);border:3px solid #FF8C00}.message-content h1{margin:0;font-size:2.5rem;color:#8b4513;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.2),0 0 20px rgba(255,255,255,.5);font-weight:700;line-height:1.3}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(0) rotate(10deg);opacity:0}50%{transform:scale(1.1) rotate(-5deg)}to{transform:scale(1) rotate(0);opacity:1}}@media (max-width: 768px){.message-content{padding:1.5rem 2rem}.message-content h1{font-size:1.5rem}}.disconnect-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out}.disconnect-modal{background-color:#1e1e1e;border-radius:16px;padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:0 8px 32px #0000004d;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.disconnect-icon{font-size:48px;margin-bottom:16px;animation:pulse 2s infinite}.disconnect-modal:has(.disconnect-icon:contains("🏆")){background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:2px solid #ffd700}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.disconnect-modal h2{color:#fff;margin-bottom:16px;font-size:24px}.disconnect-message{color:#ccc;margin-bottom:8px;font-size:16px}.disconnect-timer{color:#999;margin-bottom:24px;font-size:14px}.return-button{background-color:#8b5cf6;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.return-button:hover{background-color:#7c3aed;transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf64d}.return-button:active{transform:translateY(0)}.puzzle-records{position:relative;margin-bottom:1rem;text-align:center;z-index:10;display:flex;justify-content:center}.records-container{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.5rem 1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #0003;display:inline-block;max-width:fit-content}.records-container.first-time{background:linear-gradient(135deg,#8b45ff26,#ff6b6b26);border-color:#8b45ff4d;box-shadow:0 2px 12px #8b45ff4d}.record-info{font-size:.9rem;color:#ffffffe6;display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}.occurrence-count{color:gold;font-weight:500}.separator{color:#ffffff80}.best-record{color:#0f8;font-weight:500}.no-record{color:#fff9;font-style:italic}.beat-record{font-size:.85rem;color:gold;margin-top:.25rem;font-style:italic;animation:fadeInUp .5s ease-out;text-shadow:0 1px 2px rgba(0,0,0,.3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.first-time-icon{font-size:1.2rem;margin-right:.5rem;animation:twinkle 2s ease-in-out infinite}.first-time-message{color:#fff;font-weight:600;text-shadow:0 0 10px rgba(139,69,255,.5)}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.new-record-celebration{position:absolute;top:-60px;left:50%;transform:translate(-50%);z-index:100}.celebration-text{background:linear-gradient(135deg,gold,#ffed4e);color:#333;padding:.5rem 1.5rem;border-radius:20px;font-weight:700;font-size:1.1rem;box-shadow:0 4px 20px #ffd70099;white-space:nowrap;animation:sparkle 2s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.2)}}@media (max-width: 768px){.puzzle-records{margin-bottom:.5rem}.records-container{padding:.4rem .8rem;background:#000000b3;border:1px solid rgba(255,255,255,.3)}.record-info{font-size:.75rem;gap:.4rem}.separator{display:none}.occurrence-count,.best-record{font-size:.75rem}.first-time-icon{font-size:1rem;margin-right:.3rem}.celebration-text{font-size:.9rem;padding:.3rem .8rem;top:-50px}.new-record-celebration{top:-50px}}.tug-of-war-container{width:100%;padding:.5rem 0;background:linear-gradient(135deg,#81c7840d,#42a5f50d);border-radius:12px;margin-top:.5rem}.tug-of-war-game{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:relative;height:60px}.player-figure{display:flex;flex-direction:column;align-items:center;gap:.25rem;z-index:2;transition:transform .3s ease}.player-figure.left{animation:pullLeft 2s ease-in-out infinite}.player-figure.right{animation:pullRight 2s ease-in-out infinite}.player-figure.winning{transform:scale(1.1)}.player-figure.current .player-avatar{box-shadow:0 0 0 3px var(--color-accent-primary)}.player-avatar{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.player-emoji{font-size:20px}.player-label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}.player-stars{display:flex;gap:1px;margin-top:2px}.star{font-size:12px;transition:transform .3s ease}.star.filled{animation:starPop .5s ease}.rope-container{position:absolute;left:15%;right:15%;top:50%;transform:translateY(-50%);height:20px;display:flex;align-items:center}.rope{position:relative;width:100%;height:6px;background:repeating-linear-gradient(90deg,#8b4513,#8b4513 5px,sienna 5px,sienna 10px);border-radius:3px;box-shadow:0 2px 4px #0003}.rope-center-flag{position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .8s cubic-bezier(.4,0,.2,1);z-index:3}.flag{font-size:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:flagWave 2s ease-in-out infinite}.victory-zone{position:absolute;top:-10px;bottom:-10px;width:30px;display:flex;align-items:center;justify-content:center;opacity:.5}.victory-zone.left{left:-20px;background:linear-gradient(90deg,transparent,rgba(129,199,132,.2))}.victory-zone.right{right:-20px;background:linear-gradient(90deg,rgba(66,165,245,.2),transparent)}.zone-marker{font-size:16px;opacity:.7}.center-line{position:absolute;left:50%;top:-8px;bottom:-8px;width:2px;background:#0000001a;transform:translate(-50%)}.tug-status{text-align:center;margin-top:.25rem;font-size:.8rem;height:1rem}.status-tied{color:var(--color-text-secondary)}.status-winning{color:var(--color-accent-primary);font-weight:600}.status-victory{color:var(--color-success);font-weight:700;font-size:1rem;animation:victoryPulse 1s ease-in-out infinite}@keyframes pullLeft{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-3px) rotate(-2deg)}75%{transform:translate(2px) rotate(1deg)}}@keyframes pullRight{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(3px) rotate(2deg)}75%{transform:translate(-2px) rotate(-1deg)}}@keyframes flagWave{0%,to{transform:translate(-50%,-50%) rotate(-5deg)}50%{transform:translate(-50%,-50%) rotate(5deg)}}@keyframes starPop{0%{transform:scale(0)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes victoryPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width: 768px){.tug-of-war-game{padding:0 1rem;height:50px}.player-avatar{width:32px;height:32px}.player-emoji{font-size:18px}.player-label{font-size:.7rem}.rope-container{left:20%;right:20%}.star{font-size:10px}}.game-screen{display:flex;flex-direction:column;height:100vh;background-color:var(--color-bg-primary);color:var(--color-text-primary);overflow:hidden}.game-header-minimal{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background-color:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.header-left{display:flex;align-items:center;gap:1rem}.room-code{font-size:1.25rem;font-weight:600;color:var(--color-text-primary);opacity:.9}.round-indicator{font-size:.9rem;padding:.25rem .75rem;background-color:#81c78426;color:var(--color-accent-primary);border-radius:1rem;font-weight:500}.status-message-minimal{font-size:.95rem;color:var(--color-text-secondary);opacity:.8}.leave-btn-minimal{padding:.5rem 1rem;background-color:transparent;color:var(--color-error);border:1px solid var(--color-error);border-radius:.5rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;opacity:.8}.leave-btn-minimal:hover{background-color:var(--color-error);color:#fff;opacity:1}.spectator-badge{background-color:#9c27b026;color:#9c27b0;padding:.25rem .75rem;border-radius:1rem;font-size:.8rem;font-weight:500}.game-header.minimal{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background-color:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.game-info.compact{display:flex;align-items:center;gap:.75rem}.spectator-icon{font-size:1rem}.status-mini{font-size:.9rem;color:var(--color-text-secondary);flex:1;text-align:center}.leave-btn.minimal{background:none;border:none;color:var(--color-text-muted);font-size:1.25rem;cursor:pointer;padding:.25rem .5rem;transition:color .2s}.leave-btn.minimal:hover{color:var(--color-error)}.game-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.score-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-2);flex-shrink:0}.compact-scores{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);background-color:var(--color-surface-1);border-radius:var(--radius-full);font-size:var(--text-sm)}.win-condition{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;opacity:.7;font-weight:var(--font-medium)}.score-item{display:flex;align-items:center;gap:var(--space-2)}.score-item.current .score-name{color:var(--color-accent-primary)}.score-item.opponent .score-name{color:var(--color-text-secondary)}.score-item.disconnected{opacity:.6}.score-item.disconnected .score-name{color:var(--color-text-muted)}.disconnect-indicator{color:var(--color-accent-warning);font-size:var(--text-sm);margin-right:2px}.score-value{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text-primary)}.score-separator{color:var(--color-text-muted);font-size:var(--text-base)}.game-board{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);overflow:hidden;min-height:0;padding:0}.center-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.round-timer-container{padding:var(--space-2) var(--space-4);background-color:var(--color-surface-1);border:2px solid var(--color-border-default);border-radius:var(--radius-full);display:flex;align-items:center;gap:var(--space-2)}.timer-label{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.timer-value{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text-primary);font-family:var(--font-mono)}.claim-solution-btn{padding:var(--space-4) var(--space-8);font-size:var(--text-xl);font-weight:var(--font-bold);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-transform:uppercase;letter-spacing:.1em;position:relative;overflow:hidden}.claim-solution-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:all var(--transition-slow)}.claim-solution-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.claim-solution-btn:hover:before{width:300px;height:300px}.claim-solution-btn:active{transform:scale(.98)}.super-mode-hint{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background-color:#f0c45c1a;border:1px solid rgba(240,196,92,.3);border-radius:var(--radius-lg);color:var(--color-accent-gold);font-size:var(--text-sm);font-weight:var(--font-semibold);animation:pulse 2s infinite}.hint-icon{width:20px;height:20px}.solution-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.solution-modal-content{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-strong);padding:var(--space-8);border-radius:var(--radius-xl);width:90%;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideIn var(--transition-slow)}.solution-modal-header{text-align:center;margin-bottom:var(--space-6)}.solution-modal-content h2{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-accent-primary);margin:0 0 var(--space-3) 0;font-family:var(--font-primary)}.solution-timer{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background-color:var(--color-surface-1);border-radius:var(--radius-full);font-size:var(--text-lg);color:var(--color-accent-gold);font-weight:var(--font-semibold)}.solution-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--space-4) var(--space-8);border-radius:var(--radius-xl);font-size:var(--text-2xl);font-weight:var(--font-bold);animation:popIn var(--transition-slow);z-index:var(--z-overlay)}.solution-result.success{background:linear-gradient(135deg,var(--color-success),#4ade80);color:#fff;box-shadow:0 0 30px #62976080}.solution-result.failure{background:linear-gradient(135deg,var(--color-error),#ef4444);color:#fff;box-shadow:0 0 30px #ca343180}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.game-over-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-over-content{background-color:var(--color-bg-secondary);border:2px solid var(--color-accent-gold);padding:var(--space-10);border-radius:var(--radius-2xl);text-align:center;box-shadow:0 0 50px #f0c45c4d;animation:zoomIn var(--transition-slower);max-width:600px}.game-over-content h2{font-size:var(--text-4xl);font-weight:var(--font-bold);background:linear-gradient(135deg,var(--color-accent-gold),#f4d03f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0 0 var(--space-6) 0;font-family:var(--font-primary)}.winner-info{font-size:var(--text-2xl);color:var(--color-text-primary);margin-bottom:var(--space-6)}.winner-name{color:var(--color-accent-primary);font-weight:var(--font-bold)}.final-stats{display:flex;justify-content:center;gap:var(--space-8);margin:var(--space-8) 0}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-text-primary)}.game-over-actions{display:flex;gap:var(--space-4);justify-content:center}.play-again-btn,.back-to-lobby-btn{padding:var(--space-4) var(--space-6);border:none;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base);text-transform:uppercase;letter-spacing:.05em}.play-again-btn{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary)}.play-again-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.back-to-lobby-btn{background-color:var(--color-surface-2);color:var(--color-text-primary);border:2px solid var(--color-border-default)}.back-to-lobby-btn:hover{background-color:var(--color-surface-3);border-color:var(--color-border-strong);transform:translateY(-2px)}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 1024px){.game-main{flex-direction:column;padding:var(--space-4)}.player-column{width:100%}.game-board{order:-1;margin-bottom:var(--space-4)}}@media (max-width: 768px){.game-screen{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}.game-content{overflow-y:auto!important;-webkit-overflow-scrolling:touch;flex:1;min-height:0}.center-area{flex:0 0 auto;max-height:none;overflow:visible}.game-board{flex:0 1 auto;overflow:visible;min-height:auto}.game-header.minimal{padding:.3rem .5rem;height:36px;flex-shrink:0}.game-info.compact{gap:.5rem}.room-code{font-size:.9rem;font-weight:500}.round-indicator{font-size:.75rem;padding:.15rem .4rem}.spectator-icon{font-size:.85rem}.status-mini{font-size:.8rem;display:none}.leave-btn.minimal{font-size:1.1rem;padding:.2rem .4rem}.game-header-minimal{padding:.5rem 1rem;flex-wrap:wrap;gap:.5rem}.header-left{gap:.5rem}.status-message-minimal{font-size:.85rem;flex:1;text-align:center}.leave-btn-minimal{padding:.4rem .8rem;font-size:.8rem}.game-content{padding:var(--space-2)}.game-board{padding:.25rem 0;gap:var(--space-2)}.center-area{gap:var(--space-2)}.card-back{width:60px;height:85px}.claim-solution-btn{padding:var(--space-2) var(--space-4);font-size:var(--text-base)}.score-container{padding:var(--space-1) var(--space-1)}.compact-scores{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);gap:var(--space-2)}.score-value{font-size:var(--text-base)}.score-name{font-size:var(--text-xs)}.win-condition{font-size:.65rem}.solution-modal-content{padding:var(--space-6);width:95%}.game-over-content{padding:var(--space-6)}.final-stats{flex-direction:column;gap:var(--space-4)}.game-over-actions{flex-direction:column;width:100%}.play-again-btn,.back-to-lobby-btn{width:100%}}@media (max-width: 480px){.status-mini{display:none}.game-header.minimal{padding:.3rem .5rem}.room-code{font-size:.85rem}}.player-hand.minimal{background-color:transparent;border-radius:8px;padding:.5rem;margin:.25rem;border:1px solid rgba(255,255,255,.1)}.player-hand.minimal.current-player{background-color:#2196f31a;border-color:#2196f34d}.player-hand.minimal.opponent{background-color:#f443361a;border-color:#f443364d}.player-info.minimal{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.player-name{font-size:.9rem;color:var(--color-text-primary);font-weight:500;display:flex;align-items:center;gap:.25rem}.card-display{display:flex;align-items:center;gap:.25rem}.hearts-display{font-size:1rem;line-height:1}.hearts-display.shaking{animation:shake .5s ease-in-out infinite}.points-display{font-size:1.2rem;line-height:1;color:gold}.points-display.near-win{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.card-count{font-size:.75rem;color:var(--color-text-secondary);opacity:.7}.disconnect-icon{font-size:.9rem;margin-left:.25rem}.player-hand.minimal.disconnected{opacity:.5}@media (max-width: 768px){.player-hand.minimal{padding:.5rem .75rem}.player-name{font-size:.9rem}.card-count{font-size:.75rem}}.center-table{display:flex;justify-content:center;align-items:center;padding:var(--space-6)}.table-surface{background:linear-gradient(135deg,var(--color-bg-board) 0%,#5e8948 100%);border-radius:var(--radius-xl);padding:var(--space-8);min-width:450px;min-height:250px;position:relative;overflow:hidden}.table-surface:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,var(--color-accent-gold),#e0b350,var(--color-accent-gold),#f4d03f);background-size:300% 300%;border-radius:var(--radius-xl);z-index:-1;animation:goldShimmer 8s ease infinite}@keyframes goldShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.table-surface:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(255,255,255,.03) 35px,rgba(255,255,255,.03) 70px);pointer-events:none;border-radius:var(--radius-xl)}.table-surface h3{text-align:center;color:#fff;margin:0 0 var(--space-6) 0;font-size:var(--text-lg);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-primary);position:relative;z-index:1}.center-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);justify-items:center;align-items:center;min-height:140px;position:relative;z-index:1}.center-card{position:relative;transition:all var(--transition-base)}.center-card.card-0{animation:dealFromDeck .3s cubic-bezier(.4,0,.2,1)}.center-card.card-1{animation:dealFromDeck .3s cubic-bezier(.4,0,.2,1) .1s;animation-fill-mode:backwards}.center-card.card-2{animation:dealFromDeck .3s cubic-bezier(.4,0,.2,1) .2s;animation-fill-mode:backwards}.center-card.card-3{animation:dealFromDeck .3s cubic-bezier(.4,0,.2,1) .3s;animation-fill-mode:backwards}@keyframes dealFromDeck{0%{transform:translateY(-40px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes slideInFromLeft{0%{transform:translate(-40px) scale(.9);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes slideInFromRight{0%{transform:translate(40px) scale(.9);opacity:0}to{transform:translate(0) scale(1);opacity:1}}.no-cards{grid-column:1 / -1;color:#fff9;font-style:italic;text-align:center;padding:var(--space-8);font-size:var(--text-base);position:relative;z-index:1}.table-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(129,199,132,.2) 0%,transparent 70%);animation:tableGlow 3s ease-in-out infinite;pointer-events:none}@keyframes tableGlow{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}@media (max-width: 768px){.center-table{padding:var(--space-4)}.table-surface{min-width:320px;min-height:200px;padding:var(--space-6)}.center-cards{gap:var(--space-4)}.table-surface h3{font-size:var(--text-base);margin-bottom:var(--space-4)}}@media (max-width: 480px){.center-table{padding:var(--space-3)}.table-surface{min-width:280px;min-height:180px;padding:var(--space-4)}.center-cards{gap:var(--space-3)}.table-surface h3{font-size:var(--text-sm)}}.deck-test{padding:2rem;max-width:1200px;margin:0 auto}.deck-test h2{text-align:center;margin-bottom:2rem;color:#333}.test-controls{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.test-controls button{padding:.5rem 1rem;background-color:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s}.test-controls button:hover:not(:disabled){background-color:#45a049}.test-controls button:disabled{background-color:#ccc;cursor:not-allowed}.game-stats{text-align:center;margin-bottom:2rem;color:#666}.game-stats p{margin:.25rem 0}.game-layout{display:flex;flex-direction:column;gap:1rem}.selected-cards-display{text-align:center;margin-top:2rem;padding:1rem;background-color:#e3f2fd;border-radius:8px;animation:fadeIn .3s ease-in}.selected-cards-display h3{margin:0 0 .5rem;color:#1976d2}.selected-cards-display p{margin:0;color:#666}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.deck-test{padding:1rem}.test-controls{gap:.5rem}.test-controls button{padding:.4rem .8rem;font-size:.9rem}}.solution-builder{background-color:#f5f5f5;border-radius:12px;padding:2rem;max-width:600px;margin:0 auto;box-shadow:0 4px 12px #0000001a}.solution-builder h3{text-align:center;color:#333;margin-bottom:1.5rem}.available-numbers{margin-bottom:2rem}.available-numbers h4{color:#666;margin-bottom:.5rem}.number-options{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.number-option{position:relative;padding:.75rem 1rem;font-size:1.2rem;font-weight:700;border:2px solid #ddd;background-color:#fff;border-radius:8px;cursor:pointer;transition:all .2s;min-width:60px}.number-option.card{border-color:#2196f3;color:#2196f3}.number-option.result{border-color:#4caf50;color:#4caf50}.number-option:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.number-option.selected{background-color:#e3f2fd;transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.number-option:disabled{opacity:.5;cursor:not-allowed}.source-label{position:absolute;top:-8px;right:-8px;background-color:#2196f3;color:#fff;font-size:.7rem;padding:2px 6px;border-radius:10px;text-transform:uppercase}.operation-builder{background-color:#fff;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:inset 0 1px 3px #0000001a}.operation-row{display:flex;align-items:center;justify-content:center;gap:1rem}.operand{width:80px;height:60px;display:flex;align-items:center;justify-content:center;border:2px dashed #ccc;border-radius:8px;font-size:1.5rem;font-weight:700;color:#999;transition:all .2s}.operand.filled{border-style:solid;border-color:#2196f3;color:#333;background-color:#f0f8ff}.operators{display:flex;flex-direction:column;gap:.25rem}.operator{width:40px;height:40px;font-size:1.2rem;font-weight:700;background-color:#f0f0f0;border:2px solid #ddd;border-radius:50%;cursor:pointer;transition:all .2s}.operator:hover:not(:disabled){background-color:#e0e0e0;transform:scale(1.1)}.operator.selected{background-color:#ffc107;border-color:#f57c00;color:#fff}.operator:disabled{opacity:.5;cursor:not-allowed}.equals-button{padding:.5rem 1rem;font-size:1.5rem;background-color:#4caf50;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.equals-button:hover:not(:disabled){background-color:#45a049;transform:scale(1.05)}.equals-button:disabled{background-color:#ccc;cursor:not-allowed}.result{width:80px;height:60px;display:flex;align-items:center;justify-content:center;background-color:#e8f5e9;border:2px solid #4CAF50;border-radius:8px;font-size:1.5rem;font-weight:700;color:#2e7d32}.operations-history{background-color:#fff;border-radius:8px;padding:1rem;margin-bottom:1rem;min-height:100px}.operations-history h4{color:#666;margin-bottom:.5rem}.operation-step{padding:.5rem;margin-bottom:.25rem;background-color:#f5f5f5;border-radius:4px;font-family:monospace;font-size:1.1rem}.final-result{margin-top:.5rem;padding:.75rem;background-color:#4caf50;color:#fff;border-radius:8px;font-size:1.2rem;font-weight:700;text-align:center}.error-message{background-color:#ffebee;color:#c62828;padding:.75rem;border-radius:8px;margin-bottom:1rem;text-align:center}.builder-actions{display:flex;gap:.5rem;justify-content:center}.builder-actions button{padding:.75rem 1.5rem;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.builder-actions button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.builder-actions button:disabled{opacity:.5;cursor:not-allowed}.submit-button{background-color:#4caf50;color:#fff}.submit-button:hover{background-color:#45a049}@media (max-width: 768px){.solution-builder{padding:1rem}.operation-row{flex-wrap:wrap;gap:.5rem}.operand{width:60px;height:50px;font-size:1.2rem}.operators{flex-direction:row}.operator{width:35px;height:35px;font-size:1rem}}.calculator-test{padding:2rem;max-width:800px;margin:0 auto}.calculator-test h2{text-align:center;color:#333;margin-bottom:2rem}.test-section{background-color:#f5f5f5;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.test-section h3{color:#555;margin-bottom:1rem}.test-actions{display:flex;gap:1rem;justify-content:center}.test-actions button{padding:.75rem 1.5rem;background-color:#2196f3;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s}.test-actions button:hover{background-color:#1976d2;transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.custom-input{display:flex;gap:1rem;align-items:center}.custom-input input{flex:1;padding:.75rem;font-size:1rem;border:2px solid #ddd;border-radius:6px;outline:none;transition:border-color .3s}.custom-input input:focus{border-color:#2196f3}.custom-input button{padding:.75rem 2rem;background-color:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s}.custom-input button:hover{background-color:#45a049}.examples{display:flex;flex-direction:column;gap:.5rem}.example{display:flex;justify-content:space-between;padding:.5rem 1rem;background-color:#fff;border-radius:6px;border:1px solid #e0e0e0}.example .cards{font-weight:700;color:#2196f3}.example .solution{font-family:monospace;color:#666}.result-section{background-color:#e3f2fd;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.result-section h3{color:#1976d2;margin-bottom:.5rem}.result-section pre{margin:0;white-space:pre-wrap;font-family:monospace;color:#333;line-height:1.5}.test-section ul{list-style:none;padding:0}.test-section li{padding:.5rem 0;color:#666}@media (max-width: 768px){.calculator-test{padding:1rem}.test-actions,.custom-input{flex-direction:column}.custom-input input{width:100%}.example{flex-direction:column;gap:.25rem}}.interactive-table-test{padding:2rem;max-width:800px;margin:0 auto;background:#1a1a2e;min-height:100vh;color:#fff}.interactive-table-test h1{color:#4ecdc4;margin-bottom:1rem}.interactive-table-test p{color:#ccc;margin-bottom:2rem}.test-info{margin-top:3rem;padding:1.5rem;background:#ffffff0d;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.test-info h3{color:gold;margin-bottom:1rem}.test-info ol{color:#ccc;line-height:1.8;padding-left:1.5rem}.test-info li{margin-bottom:.5rem}.auth-test-container{max-width:1200px;margin:0 auto;padding:20px;background:#1a1a1a;color:#fff;min-height:100vh}.auth-test-container h1{text-align:center;color:#4caf50;margin-bottom:30px;font-size:2.5em}.auth-test-section{background:#2a2a2a;border-radius:8px;padding:20px;margin-bottom:20px;border:1px solid #444}.auth-test-section h2{color:#4caf50;margin-bottom:15px;font-size:1.5em}.auth-state{font-family:monospace;background:#1a1a1a;padding:15px;border-radius:4px;border:1px solid #444}.auth-state p{margin:5px 0}.auth-state strong{color:#4caf50}.test-credentials{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.test-credentials input{background:#1a1a1a;border:1px solid #444;color:#fff;padding:10px;border-radius:4px;font-size:14px}.test-credentials input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}.test-actions{display:flex;flex-wrap:wrap;gap:10px}.test-actions button{background:#4caf50;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.test-actions button:hover:not(:disabled){background:#45a049;transform:translateY(-1px);box-shadow:0 2px 8px #4caf504d}.test-actions button:disabled{background:#666;cursor:not-allowed;opacity:.7}.test-actions .clear-btn{background:#f44336}.test-actions .clear-btn:hover:not(:disabled){background:#e53935}.test-results{background:#1a1a1a;border:1px solid #444;border-radius:4px;padding:15px;max-height:400px;overflow-y:auto;font-family:monospace;font-size:13px}.test-result{padding:5px 0;border-bottom:1px solid #333;word-break:break-all}.test-result:last-child{border-bottom:none}.test-result:hover{background:#4caf501a}.test-results::-webkit-scrollbar{width:8px}.test-results::-webkit-scrollbar-track{background:#1a1a1a}.test-results::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.test-results::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 768px){.auth-test-container{padding:10px}.test-credentials{grid-template-columns:1fr}.test-actions{flex-direction:column}.test-actions button{width:100%}}.elo-test{max-width:800px;margin:0 auto;padding:2rem}.elo-test h2{text-align:center;margin-bottom:2rem}.test-info{background:var(--color-surface);padding:1rem;border-radius:8px;margin-bottom:2rem}.test-controls{background:var(--color-surface);padding:2rem;border-radius:8px;margin-bottom:2rem}.opponent-selector{margin-bottom:2rem}.opponent-selector label{display:block;margin-bottom:.5rem;font-weight:600}.opponent-selector select{width:100%;padding:.75rem;border-radius:4px;border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text);font-size:1rem}.test-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.test-actions button{padding:.75rem 2rem;border-radius:4px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.win-button{background:var(--color-primary);color:#fff}.win-button:hover:not(:disabled){background:var(--color-primary-dark)}.lose-button{background:var(--color-error);color:#fff}.lose-button:hover:not(:disabled){background:var(--color-error-dark)}.reset-button{background:var(--color-secondary);color:#fff}.reset-button:hover:not(:disabled){background:var(--color-secondary-dark)}.test-actions button:disabled{opacity:.5;cursor:not-allowed}.test-result{background:var(--color-background);border:1px solid var(--color-border);padding:1rem;border-radius:4px;margin-top:1rem}.test-result pre{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:monospace;font-size:.9rem}.test-notes{background:var(--color-surface);padding:1.5rem;border-radius:8px}.test-notes h3{margin-bottom:1rem;color:var(--color-primary)}.test-notes ul{margin:0;padding-left:1.5rem}.test-notes li{margin-bottom:.5rem;color:var(--color-text-secondary)}.puzzle-records-view{padding:2rem;max-width:1200px;margin:0 auto;min-height:calc(100vh - 200px)}.puzzle-records-view h2{color:#fff;text-align:center;margin-bottom:1.5rem;font-size:2.5rem;font-weight:600}.sort-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.sort-label{color:#ffffffb3;font-weight:500;margin-right:.5rem}.sort-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fffc;padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500}.sort-btn:hover{background:#fff3;border-color:#fff6;color:#fff}.sort-btn.active{background:#ffd70033;border-color:gold;color:gold;box-shadow:0 0 10px #ffd7004d}.sort-btn.active:hover{background:#ffd7004d}.loading{color:#999;text-align:center;font-size:1.2rem;padding:3rem}.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.record-item{position:relative;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;transition:all .3s ease;cursor:pointer;z-index:1}.record-item:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 20px #0000004d;z-index:1000}.record-item.hovered{z-index:1000}.rank{position:absolute;top:10px;left:10px;font-size:1.2rem;font-weight:700;color:gold;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.cards-display{display:flex;justify-content:center;gap:8px;margin:1rem 0}.card-value{width:40px;height:50px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#fff;border-radius:6px;box-shadow:0 2px 8px #0000004d;position:relative;overflow:hidden}.card-value:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%,rgba(0,0,0,.2) 100%);pointer-events:none}.occurrence-count{text-align:center;color:#ffffffb3;font-size:.9rem;margin-top:.5rem}.record-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:10px;background:#000000f2;border:1px solid rgba(255,215,0,.5);border-radius:8px;padding:1rem;min-width:200px;z-index:9999;animation:fadeIn .2s ease;box-shadow:0 4px 20px #00000080}.record-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:8px solid transparent;border-top-color:#000000f2}.tooltip-content{text-align:center}.record-holder{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:.5rem}.trophy{font-size:1.2rem}.username{color:gold;font-weight:700;font-size:1.1rem}.record-time{color:#0f8;font-size:1.3rem;font-weight:700}.last-operation{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.2);color:#ffffffe6;font-size:.95rem;font-family:Monaco,Consolas,monospace;text-align:center}.no-record{text-align:center;color:#fff6;font-style:italic;font-size:.85rem;margin-top:.5rem}.no-data{text-align:center;color:#ffffff80;font-size:1.2rem;padding:3rem}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(5px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.mobile-record-details{margin-top:1rem;padding:1rem;background:#ffd7001a;border:1px solid rgba(255,215,0,.3);border-radius:.5rem;animation:slideDown .3s ease-out}.mobile-record-details .record-holder{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-bottom:.5rem}.mobile-record-details .trophy{font-size:1.2rem}.mobile-record-details .username{color:gold;font-weight:600;font-size:1.1rem}.mobile-record-details .record-time{text-align:center;color:#0f8;font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.mobile-record-details .last-operation{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.2);color:#ffffffe6;font-size:.9rem;font-family:Monaco,Consolas,monospace;text-align:center}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}@media (max-width: 768px){.records-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.card-value{width:35px;height:45px;font-size:1.3rem}.record-item{cursor:pointer;transition:all .3s ease;position:relative}.record-item.expanded{background:#ffffff0d;transform:scale(1.02)}.record-tooltip{display:none}.record-item.has-record:after{content:"Tap to view";position:absolute;bottom:.5rem;right:.5rem;font-size:.7rem;color:#ffffff80;font-style:italic}.record-item.has-record.expanded:after{content:"Tap to close"}.record-item.no-record-data{cursor:default}.sort-controls{padding:0 1rem}.sort-label{width:100%;text-align:center;margin-bottom:.5rem}.sort-btn{padding:.4rem .8rem;font-size:.85rem}}@media (max-width: 768px){.puzzle-records-view{padding:16px 16px 80px;min-height:auto}.puzzle-records-view h2{font-size:24px;margin-bottom:16px;font-weight:700}.sort-controls{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 0 8px;scroll-snap-type:x mandatory}.sort-controls::-webkit-scrollbar{display:none}.sort-label{display:none}.sort-btn{flex-shrink:0;padding:8px 16px;font-size:13px;scroll-snap-align:start;white-space:nowrap}.records-grid{grid-template-columns:1fr;gap:12px}.record-item{padding:16px;border-radius:12px;display:flex;align-items:center;gap:16px;background:var(--color-surface-1);border:1px solid rgba(255,255,255,.1)}.record-item:hover{transform:none;box-shadow:none}.record-item:active{transform:scale(.98);background:var(--color-surface-2)}.rank{position:static;width:36px;height:36px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;background:#ffd70026;color:gold;border-radius:8px;flex-shrink:0}.cards-display{flex:1;display:flex;gap:4px;flex-wrap:wrap}.card{width:32px;height:44px;font-size:16px;border-radius:6px;border-width:1px}.record-info{display:flex;flex-direction:column;gap:4px;margin-top:0}.occurrence-count{font-size:12px;color:var(--color-text-secondary)}.occurrence-count .count{font-size:14px;font-weight:600;color:var(--color-accent-primary)}.best-record{margin-top:8px;padding:8px;background:#81c7841a;border-radius:8px;border:1px solid rgba(129,199,132,.2)}.best-record-title{font-size:11px;margin-bottom:4px;color:var(--color-text-secondary)}.record-details{flex-direction:row;justify-content:space-between;align-items:center;gap:8px}.winner-name{font-size:14px;font-weight:600}.solve-time{font-size:18px;font-weight:700}.solution-preview{display:none}.record-item.expanded .solution-preview{display:block;margin-top:8px;padding:8px;background:#ffffff0d;border-radius:6px;font-size:13px;font-family:monospace;color:var(--color-text-secondary);word-break:break-all}.loading{padding:60px 20px;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:16px}.loading:before{content:"🎯";font-size:48px;opacity:.6}.empty-state{padding:60px 20px;text-align:center;color:var(--color-text-secondary)}.empty-state h3{font-size:20px;margin-bottom:12px;color:var(--color-text-primary)}.empty-state p{font-size:16px;max-width:280px;margin:0 auto}.record-item.horizontal{padding:12px}.record-item.horizontal .cards-display{display:flex;gap:2px}.record-item.horizontal .card{width:28px;height:36px;font-size:14px}.stats-summary{background:var(--color-surface-1);border-radius:12px;padding:16px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-item{text-align:center}.stat-value{font-size:24px;font-weight:700;color:var(--color-accent-primary)}.stat-label{font-size:12px;color:var(--color-text-secondary);margin-top:2px}.view-mode-toggle{position:fixed;bottom:80px;right:16px;background:var(--color-accent-primary);color:var(--color-bg-primary);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d;z-index:100}}@media (max-width: 360px){.puzzle-records-view{padding:12px}.record-item{padding:12px;gap:12px}.rank{width:32px;height:32px;font-size:12px}.card{width:28px;height:38px;font-size:14px}}@media (orientation: landscape) and (max-height: 500px){.records-grid{grid-template-columns:repeat(2,1fr);gap:8px}.record-item{padding:12px}}.leaderboard-container{max-width:800px;margin:0 auto;padding:2rem;background:#1a1b26;border-radius:12px;box-shadow:0 4px 20px #00000080}.leaderboard-title{text-align:center;font-size:2.5rem;margin-bottom:2rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.view-toggle{display:flex;gap:1rem;margin-bottom:2rem;justify-content:center}.toggle-btn{padding:.75rem 2rem;border:2px solid #3b82f6;background:transparent;color:#3b82f6;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease}.toggle-btn:hover:not(.disabled){background:#3b82f61a;transform:translateY(-2px)}.toggle-btn.active{background:#3b82f6;color:#fff}.toggle-btn.disabled{opacity:.5;cursor:not-allowed}.leaderboard-header{text-align:center;margin-bottom:1.5rem}.elo-signup-prompt{color:var(--color-accent-primary);font-size:var(--text-base);font-weight:var(--font-medium);margin-top:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);background-color:#81c7841a;border-radius:var(--radius-md);display:inline-block}.total-puzzles{color:#94a3b8;font-size:1.1rem}.leaderboard-list{display:flex;flex-direction:column;gap:.5rem}.leaderboard-entry{display:grid;grid-template-columns:60px 1fr 120px 150px;align-items:center;padding:1rem;background:#ffffff0d;border-radius:8px;transition:all .3s ease}.leaderboard-entry:hover{background:#ffffff14;transform:translate(4px)}.leaderboard-entry.current-user{background:#3b82f61a;border:1px solid rgba(59,130,246,.3)}.rank-column{font-size:1.5rem;font-weight:700;text-align:center}.username-column{display:flex;align-items:center;gap:.5rem}.username{font-size:1.2rem;color:#fff;font-weight:600}.you-badge{background:#3b82f6;color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;font-weight:600}.records-column{display:flex;flex-direction:column;align-items:center;text-align:center}.record-count{font-size:1.5rem;font-weight:700;color:#fbbf24}.record-label{font-size:.9rem;color:#94a3b8}.percentage-column{position:relative}.percentage-bar{position:relative;height:24px;background:#ffffff1a;border-radius:12px;overflow:hidden}.percentage-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transition:width .5s ease}.percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem;font-weight:600;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.empty-state{text-align:center;padding:4rem 2rem;color:#94a3b8;font-size:1.2rem}.coming-soon{text-align:center;padding:4rem 2rem}.coming-soon-icon{font-size:4rem;margin-bottom:1rem}.coming-soon h3{font-size:2rem;color:#fff;margin-bottom:1rem}.coming-soon p{color:#94a3b8;font-size:1.1rem}.loading-spinner{text-align:center;padding:4rem;color:#94a3b8;font-size:1.2rem;animation:none!important;transform:none!important;display:flex;align-items:center;justify-content:center;gap:.25rem}.loading-text{animation:none!important;transform:none!important}.loading-dots{display:inline-flex;gap:.1rem}.loading-dots span{display:inline-block;animation:loadingDot 1.4s infinite;animation-fill-mode:both}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loadingDot{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}.level-badge{background:linear-gradient(135deg,#4b79a1,#283e51);color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;font-weight:600;margin-left:.5rem}.rarity-indicator{margin-left:.5rem;font-size:1.2rem;filter:drop-shadow(0 0 2px rgba(255,255,255,.3))}.rarity-indicator.legendary{filter:drop-shadow(0 0 4px #ffd700);animation:glow 2s ease-in-out infinite}.rarity-indicator.epic{filter:drop-shadow(0 0 3px #8b5cf6)}.rarity-indicator.rare{filter:drop-shadow(0 0 2px #3b82f6)}@keyframes glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.badge-stats-column{display:flex;flex-direction:column;gap:.3rem;flex:1}.badge-count{display:flex;flex-direction:column;align-items:center}.badge-count-number{font-size:1.5rem;font-weight:700;color:#fbbf24}.badge-count-label{font-size:.9rem;color:#94a3b8}.badge-rarity-breakdown{display:flex;gap:1rem;justify-content:center;align-items:center}.rarity-count{display:flex;align-items:center;gap:.3rem;font-size:.9rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;background:#ffffff0d}.rarity-count.legendary{color:gold;background:#ffd7001a;border:1px solid rgba(255,215,0,.3)}.rarity-count.epic{color:#8b5cf6;background:#8b5cf61a;border:1px solid rgba(139,92,246,.3)}.rarity-count.rare{color:#3b82f6;background:#3b82f61a;border:1px solid rgba(59,130,246,.3)}.points-column{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:100px}.points-value{font-size:1.5rem;font-weight:700;color:#10b981}.points-label{font-size:.9rem;color:#94a3b8}.leaderboard-entry:has(.badge-stats-column){grid-template-columns:60px 250px 1fr 120px}.badge-sort-controls{display:flex;align-items:center;gap:1rem;margin-top:1rem;justify-content:center}.badge-sort-controls label{color:#94a3b8;font-weight:600}.sort-select{padding:.5rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .3s ease}.sort-select:hover{background:#ffffff26;border-color:#ffffff4d}.sort-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.sort-select option{background:#1a1b26;color:#fff}@media (max-width: 768px){.leaderboard-container{padding:1rem;margin:1rem}.leaderboard-title{font-size:2rem}.toggle-btn{padding:.5rem 1rem;font-size:.9rem}.leaderboard-entry{grid-template-columns:50px 1fr 80px;gap:.5rem}.leaderboard-entry:has(.badge-stats-column){grid-template-columns:50px 1fr;gap:.5rem}.percentage-column,.points-column{display:none}.username{font-size:1rem}.record-count,.rank-column{font-size:1.2rem}.level-badge{font-size:.7rem;padding:.1rem .3rem}.rarity-indicator{font-size:1rem}.badge-rarity-breakdown{flex-wrap:wrap;gap:.3rem}.rarity-count{font-size:.8rem;padding:.1rem .3rem}}.error-state{text-align:center;padding:3rem 2rem;background:var(--color-bg-secondary);border:1px solid var(--color-danger);border-radius:var(--radius-lg);margin:1rem 0}.error-message{color:var(--color-danger);font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.error-hint{color:var(--color-text-secondary);font-size:.9rem;margin-bottom:1.5rem}.retry-btn{background:var(--color-primary);color:#fff;border:none;padding:.5rem 1.5rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.retry-btn:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.retry-btn:active{transform:translateY(0)}.ranked-list{gap:.75rem}.ranked-entry{display:grid;grid-template-columns:60px 1fr auto auto;gap:1rem;align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:1rem 1.5rem;transition:all var(--transition-base)}.ranked-entry:hover{transform:translate(4px);box-shadow:var(--shadow-md);border-color:var(--color-border-hover)}.ranked-entry.current-user{background:linear-gradient(135deg,#fef9e7,#fcf3cf);border-color:#f39c12}.tier-icon{font-size:1.5rem;margin-right:.5rem}.rating-column{display:flex;flex-direction:column;align-items:center;text-align:center}.rating-value{font-size:1.5rem;font-weight:700;color:var(--color-primary)}.rating-label{font-size:.8rem;color:var(--color-text-secondary);margin-top:.2rem}.peak-rating{font-size:.75rem;color:var(--color-text-tertiary);margin-top:.2rem}.stats-column{display:flex;gap:2rem}.games-played,.win-rate{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-value{font-size:1.2rem;font-weight:600;color:var(--color-text-primary)}.stat-label{font-size:.75rem;color:var(--color-text-secondary);margin-top:.2rem}.region-filter{display:flex;align-items:center;gap:.5rem;margin-left:auto}.region-select{padding:.5rem 1rem;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text-primary);font-size:.9rem;cursor:pointer;transition:all var(--transition-base)}.region-select:hover{border-color:var(--color-border-hover)}.region-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #4a90e233}.load-more-container{display:flex;justify-content:center;margin-top:2rem}.load-more-btn{padding:.75rem 2rem;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:all var(--transition-base)}.load-more-btn:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.load-more-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.ranked-entry{grid-template-columns:1fr;gap:.75rem;text-align:center}.stats-column{justify-content:center}.region-filter{margin-left:0;margin-top:1rem;justify-content:center}}.level-indicator{background:#ffffff0d;border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.level-indicator--small{padding:.75rem;border-radius:8px}.level-indicator--small .level-header{flex-direction:row;align-items:center;gap:1rem}.level-indicator--small .level-badge{width:40px;height:40px}.level-indicator--small .level-number{font-size:1.2rem}.level-indicator--small .level-label{display:none}.level-indicator--medium{padding:1.5rem}.level-indicator--large{padding:2rem}.level-indicator--common{border-color:#94a3b84d}.level-indicator--uncommon{border-color:#22c55e4d;background:#22c55e0d}.level-indicator--rare{border-color:#3b82f64d;background:#3b82f60d}.level-indicator--epic{border-color:#8b5cf64d;background:#8b5cf60d}.level-indicator--legendary{border-color:#ffd7004d;background:#ffd7000d;animation:legendary-glow 3s ease-in-out infinite}@keyframes legendary-glow{0%,to{box-shadow:0 0 20px #ffd70033}50%{box-shadow:0 0 30px #ffd70066}}.level-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.level-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 4px 15px #667eea4d}.level-indicator--legendary .level-badge{background:linear-gradient(135deg,gold,#ffed4e);box-shadow:0 4px 20px #ffd70080}.level-indicator--epic .level-badge{background:linear-gradient(135deg,#8b5cf6,#a78bfa);box-shadow:0 4px 20px #8b5cf666}.level-indicator--rare .level-badge{background:linear-gradient(135deg,#3b82f6,#60a5fa);box-shadow:0 4px 20px #3b82f666}.level-number{font-size:1.8rem;font-weight:700;color:#fff;line-height:1}.level-label{font-size:.7rem;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.level-details{display:flex;align-items:center;gap:.5rem;color:#94a3b8;font-size:.9rem}.current-points{color:#fbbf24;font-weight:600}.points-separator{color:#64748b}.next-level-points{color:#94a3b8}.level-progress{margin-top:1rem}.progress-bar{height:24px;background:#ffffff1a;border-radius:12px;overflow:hidden;position:relative}.level-indicator--small .progress-bar{height:16px;border-radius:8px}.progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;transition:width .5s ease}.progress-fill.animated{animation:progress-pulse 2s ease-in-out infinite}@keyframes progress-pulse{0%,to{opacity:1}50%{opacity:.8}}.level-indicator--legendary .progress-fill{background:linear-gradient(90deg,gold,#ffed4e)}.level-indicator--epic .progress-fill{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.level-indicator--rare .progress-fill{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.progress-text{color:#fff;font-size:.9rem;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.progress-info{margin-top:.5rem;text-align:center}.points-to-next{color:#94a3b8;font-size:.85rem}.level-milestones{margin-top:1rem;text-align:center}.milestone-achieved{background:linear-gradient(135deg,#10b981,#34d399);color:#fff;padding:.5rem 1rem;border-radius:8px;font-weight:600;display:inline-block;animation:milestone-bounce .5s ease}@keyframes milestone-bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.level-indicator:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}@media (max-width: 768px){.level-indicator--medium{padding:1rem}.level-indicator--large{padding:1.5rem}.level-header{flex-direction:column;align-items:flex-start;gap:.5rem}.level-details{font-size:.85rem}}.badge-gallery-container{max-width:1200px;margin:0 auto;padding:2rem}.badge-gallery-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid var(--primary-color, #3B82F6);border-radius:50%;animation:spin 1s linear infinite}.badge-gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.gallery-title{font-size:2rem;font-weight:700;margin:0}.player-level-info{display:flex;align-items:center;gap:1.5rem}.level-badge{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff}.level-label{font-size:.75rem;text-transform:uppercase;opacity:.9}.level-number{font-size:1.5rem;font-weight:700}.points-info{display:flex;flex-direction:column;align-items:flex-end}.points-value{font-size:1.25rem;font-weight:700;color:#f59e0b}.points-label{font-size:.875rem;color:var(--color-text-secondary)}.badge-filter-container{margin-bottom:2rem;space-y:1rem}.badge-search{position:relative;margin-bottom:1rem}.badge-search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border:1px solid #E5E7EB;border-radius:8px;font-size:1rem;transition:border-color .2s}.badge-search-input:focus{outline:none;border-color:#3b82f6}.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1.25rem}.badge-categories{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}.category-button{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;background:var(--color-surface-1);border:2px solid #E5E7EB;border-radius:12px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.category-button:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.category-button.active{border-color:#3b82f6;background:var(--color-surface-2)}.category-icon{font-size:1.5rem;margin-bottom:.25rem}.category-name{font-size:.875rem;font-weight:500;margin-bottom:.25rem}.category-stats{font-size:.75rem;color:var(--color-text-secondary)}.earned-count{color:var(--color-accent-success);font-weight:600}.separator{margin:0 .125rem}.category-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--color-surface-3)}.category-progress .progress-fill{height:100%;background:#10b981;transition:width .3s ease}.badge-filter-options{display:flex;gap:1rem}.filter-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem}.filter-checkbox input[type=checkbox]{cursor:pointer}.badge-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.badge-card{position:relative;padding:1.5rem;background:var(--color-surface-1);border:2px solid #E5E7EB;border-radius:16px;cursor:pointer;transition:all .3s;overflow:hidden}.badge-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000001a}.badge-card.earned{border-color:#10b981;background:linear-gradient(to bottom right,#f0fdf4,#dcfce7)}.badge-card.in-progress{border-color:#f59e0b;background:linear-gradient(to bottom right,#fffbeb,#fef3c7)}.badge-card.locked{opacity:.7;background:var(--color-bg-secondary)}.badge-card.badge-rarity-rare{border-color:#3b82f6}.badge-card.badge-rarity-epic{border-color:#8b5cf6}.badge-card.badge-rarity-legendary{border-color:#f59e0b;box-shadow:0 0 20px #f59e0b4d}.badge-icon-wrapper{position:relative;width:60px;height:60px;margin-bottom:1rem}.badge-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--color-surface-1);border-radius:50%;box-shadow:0 2px 4px #0000001a}.badge-custom-icon{width:100%;height:100%;object-fit:contain;border-radius:50%}.badge-tier-indicator{position:absolute;top:-4px;right:-4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border-radius:50%;color:#fff}.badge-tier-indicator.bronze{background:#cd7f32}.badge-tier-indicator.silver{background:silver}.badge-tier-indicator.gold{background:gold}.badge-tier-indicator.platinum{background:#e5e4e2;color:#333}.badge-tier-indicator.diamond{background:#b9f2ff;color:#333}.badge-name{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;color:#1f2937}.badge-description{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:1rem;line-height:1.4}.badge-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem}.badge-points{display:flex;align-items:baseline;gap:.25rem}.badge-points .points-value{font-size:1.125rem;font-weight:700;color:#f59e0b}.badge-points .points-label{font-size:.75rem;color:var(--color-text-secondary)}.progress-bar{flex:1}.progress-bar.compact .progress-track{height:6px}.progress-track{height:8px;background:var(--color-surface-3);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.progress-label{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;font-size:.75rem;color:var(--color-text-secondary)}.progress-label .current{font-weight:600;color:#3b82f6}.no-badges-message{grid-column:1 / -1;text-align:center;padding:3rem;color:var(--color-text-secondary)}.badge-detail-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.badge-detail-modal{background:var(--color-surface-1);border-radius:20px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 25px -5px #0000001a}.modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:var(--color-surface-2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:background .2s}.modal-close:hover{background:var(--color-surface-3)}.badge-detail-header{padding:2rem;display:flex;gap:1.5rem;align-items:flex-start}.badge-detail-icon{width:100px;height:100px;position:relative}.badge-detail-icon .icon-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--color-surface-1);border-radius:50%;box-shadow:0 4px 6px #0000001a}.badge-detail-icon.earned .icon-content{background:#10b981;color:#fff}.badge-detail-icon.in-progress .icon-content{background:#f59e0b;color:#fff}.badge-detail-icon .badge-custom-icon{width:100%;height:100%;object-fit:contain;border-radius:50%}.tier-badge{position:absolute;bottom:-8px;right:-8px;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:700;color:#fff;box-shadow:0 2px 4px #0003}.badge-detail-info{flex:1}.badge-detail-name{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;color:var(--color-text-primary)}.badge-detail-description{color:var(--color-text-secondary);margin-bottom:1rem;line-height:1.5}.badge-meta{display:flex;gap:1rem;align-items:center}.badge-rarity{font-weight:600;text-transform:uppercase;font-size:.875rem}.badge-detail-content{padding:0 2rem 2rem}.badge-detail-content>div{margin-bottom:1.5rem}.badge-detail-content h3{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--color-text-primary)}.earned-info{text-align:center;padding:2rem;background:var(--color-surface-2);border-radius:12px}.earned-icon{font-size:3rem;margin-bottom:.5rem}.earned-text{font-size:1.125rem;font-weight:500;color:var(--color-accent-success)}.progress-section{background:var(--color-surface-2);padding:1.5rem;border-radius:12px}.progress-text{margin-top:.5rem;font-size:.875rem;color:var(--color-text-secondary)}.requirements-section{background:var(--color-surface-2);padding:1.5rem;border-radius:12px}.requirement-text{color:var(--color-text-secondary);line-height:1.5}.tier-list{display:flex;justify-content:space-between;padding:1rem;background:var(--color-bg-secondary);border-radius:12px}.tier-item{font-size:.875rem;font-weight:600;transition:transform .2s}.tier-item.current{transform:scale(1.2)}@media (max-width: 768px){.badge-gallery-container{padding:1rem}.badge-gallery-header{flex-direction:column;align-items:flex-start}.badge-categories{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;margin:0 -1rem;padding:0 1rem}.category-button{flex-shrink:0}.badge-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.badge-detail-header{flex-direction:column;align-items:center;text-align:center}}@media (max-width: 768px){.badge-gallery-container{padding:16px 16px 80px}.badge-gallery-header{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:24px}.gallery-title{font-size:24px;text-align:center}.player-level-info{justify-content:center;gap:16px}.level-badge{padding:8px 16px;border-radius:10px}.level-label{font-size:11px}.level-number{font-size:20px}.points-info{align-items:center}.points-value{font-size:18px}.points-label{font-size:12px}.badge-filter-container{margin-bottom:20px}.badge-search{margin-bottom:12px}.badge-search-input{padding:12px 12px 12px 36px;font-size:16px;border-radius:10px;background:var(--color-surface-1);border:1px solid rgba(255,255,255,.1);color:var(--color-text-primary)}.search-icon{left:12px;font-size:18px;color:var(--color-text-secondary)}.badge-categories{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;margin:0;padding:0 0 8px;width:100%;box-sizing:border-box}.badge-categories::-webkit-scrollbar{display:none}.category-button{flex-shrink:0;padding:10px 16px;border-radius:10px;font-size:14px;scroll-snap-align:start;min-width:fit-content}.category-icon{font-size:20px;margin-bottom:4px}.category-name{font-size:12px}.category-count{font-size:10px;padding:2px 6px;border-radius:10px}.toggle-options{flex-direction:column;gap:12px;margin-top:12px}.toggle-option{width:100%;justify-content:space-between;padding:12px 16px;background:var(--color-surface-1);border-radius:10px;font-size:14px}.badge-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.badge-card{border-radius:12px;padding:12px;min-height:auto;position:relative;overflow:visible}.badge-card-header{padding:8px;margin:-12px -12px 8px}.badge-tier{padding:4px 8px;font-size:10px;letter-spacing:.5px}.badge-icon-wrapper{width:60px;height:60px;margin:0 auto 8px}.badge-icon{font-size:32px}.badge-name{font-size:14px;line-height:1.2;margin-bottom:4px;min-height:auto}.badge-description{font-size:11px;line-height:1.3;margin-bottom:8px;min-height:auto;-webkit-line-clamp:2}.badge-footer{flex-direction:column;gap:8px;margin-top:8px}.badge-points{justify-content:center}.badge-points .points-value{font-size:14px}.badge-points .points-label{font-size:10px}.progress-bar.compact{width:100%}.progress-bar.compact .progress-track{height:4px}.progress-label{font-size:10px;justify-content:center}.badge-detail-modal-backdrop{padding:0;align-items:flex-end}.badge-detail-modal{max-width:100%;width:100%;max-height:95vh;border-radius:24px 24px 0 0;margin:0;padding-bottom:env(safe-area-inset-bottom,0)}.badge-detail-header{padding:20px 20px 16px}.detail-badge-icon{width:80px;height:80px;font-size:48px}.badge-detail-content{padding:0 20px 20px}.detail-section{margin-bottom:20px}.detail-section-title{font-size:16px;margin-bottom:8px}.requirement-item{padding:10px 12px;font-size:13px;border-radius:8px}.requirement-icon{font-size:16px}.badge-gallery-loading{min-height:300px}.no-badges-message{padding:40px 20px;font-size:14px}.no-badges-message h3{font-size:18px;margin-bottom:8px}.stats-grid{grid-template-columns:1fr;gap:12px;margin-top:16px}.stat-item{padding:12px;border-radius:10px;background:var(--color-surface-1);display:flex;justify-content:space-between;align-items:center}.stat-label{font-size:13px;color:var(--color-text-secondary)}.stat-value{font-size:16px;font-weight:600;color:var(--color-accent-primary)}}@media (max-width: 360px){.badge-gallery-container{padding:12px}.gallery-title{font-size:20px}.badge-grid{gap:10px}.badge-card{padding:10px}.badge-icon-wrapper{width:50px;height:50px}.badge-icon{font-size:28px}.badge-name{font-size:12px}.badge-description{font-size:10px}}@media (orientation: landscape) and (max-height: 500px){.badge-gallery-header{flex-direction:row;margin-bottom:16px}.badge-grid{grid-template-columns:repeat(3,1fr)}.badge-detail-modal{max-height:100vh;border-radius:0}}@media (hover: none){.badge-card:active{transform:scale(.98);transition:transform .1s ease}.category-button:active{transform:scale(.95)}.toggle-option:active{background:var(--color-surface-2)}}@media (prefers-contrast: high){.badge-card{border:2px solid var(--color-border-strong)}.category-button.active{border-width:3px}}@media (prefers-reduced-motion: reduce){.badge-card,.category-button,.progress-fill{transition:none}}.badges-page{min-height:calc(100vh - 120px);background:var(--color-bg-primary);padding:var(--space-4);max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}@media (max-width: 768px){.badges-page{padding:0;gap:0;min-height:100%;height:100%;display:flex;flex-direction:column}.badges-page .auth-required-message{flex:1}}.badge-gallery-container{background:var(--color-bg-primary)!important;color:var(--color-text-primary)!important}.badge-card{background:var(--color-surface-1)!important;border-color:var(--color-border-default)!important}.badge-card:hover{background:var(--color-surface-2)!important;border-color:var(--color-border-emphasis)!important}.category-tabs{background:var(--color-bg-secondary)!important;border-color:var(--color-border-default)!important}.category-tab{background:transparent!important;color:var(--color-text-secondary)!important}.category-tab:hover{background:var(--color-surface-1)!important;color:var(--color-text-primary)!important}.category-tab.active{background:var(--color-accent-primary)!important;color:var(--color-bg-primary)!important}.badge-stats{background:var(--color-surface-2)!important}.search-bar input{background:var(--color-surface-1)!important;border-color:var(--color-border-default)!important;color:var(--color-text-primary)!important}.search-bar input::placeholder{color:var(--color-text-muted)!important}.progress-bar{background:var(--color-surface-2)!important}.progress-bar-fill{background:var(--color-accent-primary)!important}.badge-name,.badge-description,.badge-requirement{color:var(--color-text-primary)!important}.badge-meta{color:var(--color-text-secondary)!important}.badge-tier-indicator.platinum{background:#e5e4e2!important;color:var(--color-bg-primary)!important}.badge-tier-indicator.diamond{background:#b9f2ff!important;color:var(--color-bg-primary)!important}.badge-detail-modal{background:var(--color-surface-1)!important;color:var(--color-text-primary)!important}.badge-detail-name{color:var(--color-text-primary)!important}.badge-detail-description{color:var(--color-text-secondary)!important}.badge-detail-content h3{color:var(--color-text-primary)!important}.badge-detail-content p{color:var(--color-text-secondary)!important}.earned-text{color:#10b981!important}.progress-section,.requirements-section{background:var(--color-surface-2)!important;border:1px solid var(--color-border-default)!important}.earned-info{background:var(--color-surface-2)!important;border:1px solid var(--color-accent-success)!important}.modal-close{color:var(--color-text-secondary)!important;background:var(--color-surface-2)!important}.modal-close:hover{color:var(--color-text-primary)!important;background:var(--color-surface-3)!important}.profile-header,.stat-card{background:var(--color-surface-1)!important;color:var(--color-text-primary)!important}.profile-username{color:var(--color-text-primary)!important}.profile-joined,.stat-label{color:var(--color-text-secondary)!important}.no-games{background:var(--color-surface-1)!important;color:var(--color-text-secondary)!important}.badge-showcase{background:var(--color-surface-1)!important;color:var(--color-text-primary)!important}.featured-badge{background:var(--color-surface-2)!important}.featured-badge.rare{background:linear-gradient(135deg,rgba(66,165,245,.2) 0%,var(--color-surface-2) 100%)!important}.featured-badge.epic{background:linear-gradient(135deg,rgba(171,71,188,.2) 0%,var(--color-surface-2) 100%)!important}.featured-badge.legendary{background:linear-gradient(135deg,rgba(255,167,38,.2) 0%,var(--color-surface-2) 100%)!important}.badge-selector-modal{background:var(--color-surface-1)!important;color:var(--color-text-primary)!important}.selectable-badge{background:var(--color-surface-2)!important}.selectable-badge:hover{background:var(--color-surface-3)!important}.badge-showcase .add-badge-button,.badge-showcase .change-badge-button,.badge-tier-indicator{color:var(--color-bg-primary)!important}.badge-unlock-notification{position:fixed;top:80px;right:20px;width:400px;background:#fff;border-radius:20px;box-shadow:0 10px 40px #0003;transform:translate(500px);opacity:0;transition:all .3s ease-out;z-index:1000;overflow:hidden}.badge-unlock-notification.visible{transform:translate(0);opacity:1}.badge-unlock-notification.exiting{transform:translate(500px);opacity:0}.badge-unlock-notification.rare{border:2px solid #3B82F6}.badge-unlock-notification.epic{border:2px solid #8B5CF6}.badge-unlock-notification.legendary{border:2px solid #F59E0B;animation:legendary-glow 2s ease-in-out infinite}@keyframes legendary-glow{0%,to{box-shadow:0 10px 40px #0003,0 0 40px #f59e0b4d}50%{box-shadow:0 10px 40px #0003,0 0 60px #f59e0b80}}.badge-unlock-content{padding:1.5rem}.badge-unlock-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.unlock-title{font-size:1.125rem;font-weight:600;color:#1f2937;text-transform:uppercase;letter-spacing:.05em}.close-btn{width:28px;height:28px;border:none;background:#f3f4f6;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:1rem}.close-btn:hover{background:#e5e7eb}.badge-unlock-body{display:flex;gap:1.5rem;align-items:center}.badge-icon-container{position:relative;flex-shrink:0}.badge-icon-wrapper{position:relative;width:80px;height:80px}.badge-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;position:relative;overflow:hidden}.badge-icon.animated{animation:badge-bounce .6s ease-out}@keyframes badge-bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.badge-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;border-radius:50%;opacity:.3;filter:blur(20px);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(.8);opacity:.3}50%{transform:scale(1.2);opacity:.5}}.badge-symbol{font-size:2.5rem;z-index:1;animation:badge-spin .6s ease-out .3s}@keyframes badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tier-indicator{position:absolute;bottom:-4px;right:-4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700;border-radius:50%;color:#fff;box-shadow:0 2px 4px #0003}.sparkles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.sparkle{position:absolute;font-size:1rem;animation:sparkle-float 2s ease-out forwards}.sparkle:nth-child(1){top:10%;left:10%;animation-delay:.1s}.sparkle:nth-child(2){top:20%;right:10%;animation-delay:.3s}.sparkle:nth-child(3){bottom:20%;left:15%;animation-delay:.5s}.sparkle:nth-child(4){bottom:10%;right:15%;animation-delay:.7s}@keyframes sparkle-float{0%{opacity:0;transform:translateY(0) scale(0)}50%{opacity:1;transform:translateY(-20px) scale(1)}to{opacity:0;transform:translateY(-40px) scale(0)}}.badge-name{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:#1f2937}.badge-description{font-size:.875rem;color:#6b7280;margin-bottom:.75rem;line-height:1.4}.badge-meta{display:flex;gap:1rem;align-items:center;font-size:.875rem}.badge-rarity{font-weight:600;text-transform:uppercase}.badge-points{color:#f59e0b;font-weight:600}.tier-upgrade{margin-top:.75rem;padding:.5rem .75rem;background:#f0fdf4;border-radius:8px;display:inline-block}.upgrade-text{font-size:.875rem;color:#10b981;font-weight:500}.show-details-btn{width:100%;margin-top:1rem;padding:.75rem;background:#3b82f6;color:#fff;border:none;border-radius:12px;font-weight:500;cursor:pointer;transition:background .2s}.show-details-btn:hover{background:#2563eb}@media (max-width: 480px){.badge-unlock-notification{width:calc(100vw - 40px);right:20px;left:20px}.badge-unlock-body{flex-direction:column;text-align:center}.badge-info{display:flex;flex-direction:column;align-items:center}.badge-meta{justify-content:center}}.badge-notification-queue{position:relative}.queue-indicator{position:fixed;top:190px;right:20px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#374151;color:#fff;border-radius:12px;font-size:.875rem;box-shadow:0 4px 6px #0000001a;animation:slide-in .3s ease-out}@keyframes slide-in{0%{transform:translate(100px);opacity:0}to{transform:translate(0);opacity:1}}.queue-count{font-weight:600;color:#f59e0b}.queue-text{color:#d1d5db}.profile-container{max-width:1200px;margin:0 auto;padding:20px}.profile-error,.profile-loading{text-align:center;padding:60px;color:var(--color-text-secondary);font-size:1.1rem}.profile-header{display:flex;align-items:center;gap:30px;margin-bottom:40px;padding:30px;background:var(--color-surface-1);border-radius:12px;box-shadow:0 2px 8px #0000001a}.profile-avatar{width:120px;height:120px;border-radius:50%;background:var(--color-accent-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;box-shadow:0 4px 12px #81c7844d}.profile-info{flex:1}.profile-username{margin:0 0 10px;font-size:2rem;color:var(--color-text-primary)}.profile-joined{margin:0;color:var(--color-text-secondary);font-size:1rem}.profile-stats{margin:40px 0}.profile-stats h2{margin-bottom:20px;color:var(--color-text-primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.stat-card{background:var(--color-surface-1);border-radius:8px;padding:20px;text-align:center;box-shadow:0 2px 4px #0000001a;transition:transform .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.stat-label{font-size:.9rem;color:var(--color-text-secondary);margin-bottom:10px}.stat-value{font-size:2rem;font-weight:700;color:var(--color-accent-primary)}.profile-recent-games{margin-top:40px}.profile-recent-games h2{margin-bottom:20px;color:var(--color-text-primary)}.no-games{text-align:center;padding:40px;background:var(--color-surface-1);border-radius:8px;color:var(--color-text-secondary)}@media (max-width: 768px){.profile-header{flex-direction:column;text-align:center}.profile-avatar{width:100px;height:100px;font-size:2.5rem}.profile-username{font-size:1.5rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.stat-card{padding:15px}.stat-value{font-size:1.5rem}}.profile-tabs{display:flex;gap:10px;margin-bottom:30px;justify-content:center;border-bottom:2px solid var(--color-border-default);padding-bottom:0}.profile-tab{padding:12px 30px;background:none;border:none;color:var(--color-text-secondary);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;border-bottom:3px solid transparent;margin-bottom:-2px}.profile-tab:hover{color:var(--color-text-primary)}.profile-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.profile-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.profile-rank-display{margin:0 auto 30px;max-width:600px}.placement-notice{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:15px 20px;color:#856404;font-weight:500;text-align:center;margin-bottom:30px}.match-history-section{margin-top:40px}.match-history-section h2{margin-bottom:20px;color:var(--color-text-primary)}.match-history-list{display:flex;flex-direction:column;gap:12px}.match-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:20px;background:var(--color-surface-1);border-radius:10px;border-left:4px solid transparent;transition:all .3s ease}.match-item.win{border-left-color:#28a745}.match-item.loss{border-left-color:#dc3545}.match-item:hover{transform:translate(5px);box-shadow:0 4px 12px #0000001a}.match-info{display:flex;flex-direction:column;gap:5px}.match-opponent{display:flex;align-items:center;gap:8px;font-weight:600}.vs-label{color:var(--color-text-secondary);font-size:.9rem}.opponent-name{color:var(--color-text-primary)}.opponent-rating{color:var(--color-text-secondary);font-weight:400}.match-mode{color:var(--color-text-secondary);font-size:.9rem;text-transform:capitalize}.match-result{display:flex;align-items:center;gap:15px}.result-badge{padding:6px 16px;border-radius:20px;font-weight:600;font-size:.9rem}.result-badge.win{background:#d4edda;color:#155724}.result-badge.loss{background:#f8d7da;color:#721c24}.rating-change{font-weight:700;font-size:1.1rem}.rating-change.positive{color:#28a745}.rating-change.negative{color:#dc3545}.new-rating{color:var(--color-text-secondary);font-size:.9rem}.match-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;color:var(--color-text-secondary);font-size:.85rem}.match-duration{font-family:monospace}.no-matches,.no-ranked-stats{text-align:center;padding:60px;background:var(--color-surface-1);border-radius:8px;color:var(--color-text-secondary)}@media (max-width: 768px){.profile-tabs{flex-wrap:wrap}.profile-tab{padding:10px 20px;font-size:1rem}.match-item{grid-template-columns:1fr;gap:15px}.match-result{justify-content:space-between}.match-meta{flex-direction:row;justify-content:space-between;align-items:center;width:100%}}.badge-image-upload{max-width:1200px;margin:0 auto;padding:20px}.badge-image-upload h2{color:var(--primary-color);margin-bottom:30px}.upload-section{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:30px;margin-bottom:40px}.badge-selector,.file-selector{margin-bottom:20px}.badge-selector label,.file-selector label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-light)}.badge-selector select{width:100%;padding:10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:16px}.badge-selector select option{background:var(--bg-dark);color:#fff}.file-selector input[type=file]{padding:10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;width:100%}.upload-button{background:var(--primary-gradient);color:#fff;border:none;padding:12px 30px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.upload-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #4facfe66}.upload-button:disabled{opacity:.5;cursor:not-allowed}.message{margin-top:20px;padding:12px;border-radius:8px;text-align:center;font-weight:500}.message.success{background:#4caf5033;border:1px solid rgba(76,175,80,.5);color:#4caf50}.message.error{background:#f4433633;border:1px solid rgba(244,67,54,.5);color:#f44336}.message.warning{background:#ff980033;border:1px solid rgba(255,152,0,.5);color:#ff9800}.message.info{background:#2196f333;border:1px solid rgba(33,150,243,.5);color:#2196f3}.loading{display:inline-block;width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.badge-list-section{background:#ffffff0d;border-radius:12px;padding:30px}.badge-list-section h3{color:var(--text-light);margin-bottom:20px}.filter-controls{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.filter-controls button{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:20px;color:var(--text-light);cursor:pointer;transition:all .3s ease}.filter-controls button:hover{background:#fff3}.filter-controls button.active{background:var(--primary-gradient);border-color:transparent;color:#fff}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.badge-item{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:15px;display:flex;align-items:center;gap:15px;transition:all .3s ease}.badge-item:hover{background:#ffffff26;transform:translateY(-2px)}.badge-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:50%;flex-shrink:0}.badge-icon img{width:100%;height:100%;object-fit:contain;border-radius:50%}.badge-icon .default-icon{font-size:30px}.badge-info{flex:1}.badge-name{font-weight:600;color:#fff;margin-bottom:4px}.badge-category{font-size:14px;color:var(--text-light);opacity:.8;margin-bottom:4px}.badge-status{font-size:12px;font-weight:500}.badge-status.has-image{color:#4caf50}.badge-status.no-image{color:#ff9800}.seo-content{background-color:#f8f9fa;padding:3rem 1rem;margin-top:2rem}.seo-container{max-width:1200px;margin:0 auto}.seo-content h2{font-size:2.5rem;color:#1a1a1a;text-align:center;margin-bottom:3rem;font-weight:700}.seo-section{background:#fff;padding:2rem;margin-bottom:2rem;border-radius:12px;box-shadow:0 2px 8px #00000014}.seo-section h3{font-size:1.8rem;color:#4f46e5;margin-bottom:1.5rem;font-weight:600}.seo-section h4{font-size:1.3rem;color:#374151;margin-bottom:.5rem}.seo-section p{font-size:1.1rem;line-height:1.8;color:#4b5563;margin-bottom:1rem}.seo-section ol,.seo-section ul{font-size:1.1rem;line-height:1.8;color:#4b5563;padding-left:2rem}.seo-section li{margin-bottom:.8rem}.seo-section strong{color:#374151;font-weight:600}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:1rem}.feature{text-align:center;padding:1.5rem;background:#f3f4f6;border-radius:8px;transition:transform .2s ease}.feature:hover{transform:translateY(-2px)}.feature h4{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem}.feature p{font-size:1rem;margin:0}.seo-section dl{margin-top:1rem}.seo-section dt{font-size:1.2rem;font-weight:600;color:#374151;margin-bottom:.5rem;margin-top:1.5rem}.seo-section dt:first-child{margin-top:0}.seo-section dd{font-size:1.1rem;line-height:1.6;color:#4b5563;margin-left:0;margin-bottom:1rem}.cta{text-align:center;font-size:1.2rem;margin-top:2rem;padding:1.5rem;background:#e0e7ff;border-radius:8px}@media (max-width: 768px){.seo-content{padding:2rem .5rem}.seo-container{padding:0 .5rem}.seo-content h2{font-size:2rem;margin-bottom:2rem}.seo-section{padding:1.5rem;margin-bottom:1.5rem}.seo-section h3{font-size:1.5rem;margin-bottom:1rem}.seo-section p,.seo-section ol,.seo-section ul{font-size:1rem}.features-grid{grid-template-columns:1fr;gap:1rem}}.seo-content[aria-hidden=true]{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.language-toggle{background-color:var(--color-surface-1);border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}.language-toggle:hover{background-color:var(--color-surface-2);border-color:var(--color-border-strong);color:var(--color-text-primary)}.lang-option{transition:color var(--transition-base);font-size:var(--text-sm);letter-spacing:.02em}.lang-option.active{color:var(--color-accent-primary);font-weight:var(--font-semibold)}.separator{color:var(--color-text-muted);margin:0 var(--space-1)}@media (max-width: 768px){.language-toggle{padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.lang-option{font-size:var(--text-xs)}}.signin-form{width:100%;max-width:400px;margin:0 auto}.form-error-banner{background-color:var(--color-error-bg);color:var(--color-error);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--text-sm);text-align:center}.form-error{display:block;font-size:var(--text-xs);color:var(--color-error);margin-top:var(--space-1)}.form-input-error{border-color:var(--color-error)}.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);font-size:var(--text-sm)}.checkbox-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.checkbox-label span{color:var(--color-text-secondary)}.form-submit{width:100%;padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-6)}@media (max-width: 480px){.signin-form{padding:0 var(--space-4)}.form-title{font-size:var(--text-xl);margin-bottom:var(--space-6)}.form-options{flex-direction:column;align-items:flex-start;gap:var(--space-3)}}.signup-form{width:100%;max-width:400px;margin:0 auto}.form-title{font-size:var(--text-xl);font-weight:var(--font-bold);font-family:var(--font-primary);color:var(--color-text-primary);text-align:center;margin-bottom:var(--space-6)}.form-error{display:flex;align-items:center;gap:var(--space-2);background-color:#ca34311a;border:1px solid var(--color-error);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);color:var(--color-error);font-size:var(--text-sm)}.error-icon{flex-shrink:0}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.form-input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-base);color:var(--color-text-primary);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);transition:all var(--transition-base)}.form-input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #81c7841a}.form-input.input-error{border-color:var(--color-error)}.form-input.input-error:focus{box-shadow:0 0 0 3px #ca34311a}.form-input:disabled{opacity:.6;cursor:not-allowed}.form-input::placeholder{color:var(--color-text-muted)}.field-error{display:block;font-size:var(--text-xs);color:var(--color-error);margin-top:var(--space-1)}.form-terms{margin-bottom:var(--space-4)}.checkbox-label{display:flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--text-sm)}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;margin-top:2px;flex-shrink:0}.checkbox-label span{color:var(--color-text-secondary);line-height:1.4}.form-link{color:var(--color-accent-primary);text-decoration:none;transition:color var(--transition-base)}.form-link:hover{color:var(--color-accent-secondary);text-decoration:underline}.form-submit{width:100%;padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-4)}.form-footer{text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary)}.form-link-button{background:none;border:none;color:var(--color-accent-primary);font-size:inherit;font-weight:var(--font-medium);cursor:pointer;padding:0;margin-left:var(--space-1);transition:color var(--transition-base)}.form-link-button:hover:not(:disabled){color:var(--color-accent-secondary);text-decoration:underline}.form-link-button:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 480px){.signup-form{padding:0 var(--space-4)}.form-title{font-size:var(--text-xl);margin-bottom:var(--space-6)}}.auth-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:1000;animation:fadeIn var(--transition-base)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal{position:relative;background-color:var(--color-surface-1);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);width:100%;max-width:500px;max-height:90vh;margin:auto;overflow-y:auto;overflow-x:hidden;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:var(--space-4);right:var(--space-4);background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);transition:all var(--transition-base);z-index:1}.modal-close:hover{color:var(--color-text-primary);background-color:var(--color-surface-2)}.modal-tabs{display:flex;border-bottom:1px solid var(--color-border-subtle);padding:0 var(--space-6);padding-top:var(--space-5)}.modal-tab{flex:1;background:none;border:none;color:var(--color-text-secondary);font-size:var(--text-base);font-weight:var(--font-medium);padding:var(--space-3) var(--space-4);cursor:pointer;position:relative;transition:all var(--transition-base)}.modal-tab:hover{color:var(--color-text-primary)}.modal-tab.active{color:var(--color-accent-primary);font-weight:var(--font-semibold)}.modal-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background-color:var(--color-accent-primary);border-radius:var(--radius-sm) var(--radius-sm) 0 0}.modal-content{padding:var(--space-6) var(--space-6) var(--space-4)}.modal-divider{position:relative;text-align:center;margin:0 var(--space-6);margin-bottom:var(--space-4)}.modal-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:var(--color-border-subtle)}.modal-divider span{position:relative;background-color:var(--color-surface-1);padding:0 var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--font-medium)}.social-auth{padding:0 var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}.social-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-4);background-color:var(--color-surface-2);border:1px solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base)}.social-btn:hover:not(:disabled){background-color:var(--color-surface-3);border-color:var(--color-border-strong);transform:translateY(-1px)}.social-btn:disabled{opacity:.5;cursor:not-allowed}.google-btn{background-color:#fff;color:#3c4043;border-color:#dadce0}.google-btn:hover:not(:disabled){background-color:#f8f9fa;box-shadow:var(--shadow-sm)}.guest-btn{background-color:var(--color-button-secondary);border-color:var(--color-border-default)}@media (max-width: 600px){.auth-modal{max-width:100%;margin:var(--space-4)}.modal-content,.social-auth,.modal-tabs{padding-left:var(--space-4);padding-right:var(--space-4)}.modal-divider{margin-left:var(--space-4);margin-right:var(--space-4)}}@media (max-width: 480px){.auth-modal-backdrop{padding:0;align-items:flex-start}.auth-modal{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;height:100vh!important;max-height:100vh!important;max-width:100vw!important;border-radius:0!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.modal-close{top:var(--space-3);right:var(--space-3)}.modal-content{padding:var(--space-4) var(--space-4) var(--space-3);flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.modal-tabs{padding-top:var(--space-4);flex-shrink:0}.social-auth{padding-bottom:env(safe-area-inset-bottom,var(--space-4))}.form-group{margin-bottom:var(--space-3)}}.navigation{background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border-subtle);position:sticky;top:0;z-index:var(--z-sticky);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#272522f2;flex-shrink:0}.nav-container{max-width:1200px;margin:0 auto;padding:0 var(--space-4);display:flex;align-items:center;justify-content:space-between;height:60px}.nav-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text-primary);font-weight:var(--font-bold);font-size:var(--text-xl);margin-right:var(--space-8);transition:all var(--transition-base)}.nav-logo:hover{color:var(--color-accent-primary)}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-bg-primary);box-shadow:var(--shadow-sm)}.logo-text{font-family:var(--font-primary);letter-spacing:-.02em}.nav-left{display:flex;align-items:center}.nav-links{display:flex;gap:var(--space-2)}.nav-links-mobile{display:none;gap:var(--space-1)}.nav-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);color:var(--color-text-secondary);text-decoration:none;font-size:var(--text-sm);font-weight:var(--font-medium);border-radius:var(--radius-md);transition:all var(--transition-base);position:relative;background:none;border:none;cursor:pointer;font-family:inherit}.nav-link:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-surface-1)}.nav-link:disabled{opacity:.5;cursor:not-allowed}.nav-link.active{color:var(--color-accent-primary);background-color:#81c7841a}.nav-link.active:after{content:"";position:absolute;bottom:-1px;left:var(--space-4);right:var(--space-4);height:2px;background-color:var(--color-accent-primary)}.nav-link-icon{font-size:var(--text-lg)}.nav-right{display:flex;align-items:center;gap:var(--space-4)}.nav-stats{display:flex;gap:var(--space-4);padding-right:var(--space-4);border-right:1px solid var(--color-border-subtle)}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary)}.nav-rating-display{padding-right:var(--space-4);border-right:1px solid var(--color-border-subtle)}.rating-badge{position:relative;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:linear-gradient(135deg,#81c7841a,#81c7840d);border:1px solid rgba(129,199,132,.3);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base)}.rating-badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px #81c78433;border-color:#81c78480;background:linear-gradient(135deg,#81c78426,#81c78414)}.rating-tier{font-size:var(--text-xl);animation:tier-pulse 2s ease-in-out infinite}@keyframes tier-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.rating-content{display:flex;flex-direction:column;align-items:center;line-height:1}.rating-label{font-size:10px;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent-primary);opacity:.8}.rating-value{font-size:var(--text-xl);font-weight:var(--font-bold);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 20px rgba(129,199,132,.5)}.rating-glow{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(129,199,132,.3) 0%,transparent 70%);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.rating-badge:hover .rating-glow{opacity:1;animation:glow-pulse 1.5s ease-in-out infinite}@keyframes glow-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.nav-user{position:relative}.nav-user:before{content:"";position:absolute;top:100%;right:0;width:100%;height:var(--space-2);z-index:1}.user-menu-trigger{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:none;border:none;color:var(--color-text-primary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-base)}.user-menu-trigger:hover{background-color:var(--color-surface-1)}.user-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);color:var(--color-bg-primary);font-size:var(--text-sm)}.user-name{font-weight:var(--font-medium);font-size:var(--text-sm)}.dropdown-icon{transition:transform var(--transition-base)}.user-menu-trigger:hover .dropdown-icon{transform:translateY(1px)}.user-dropdown{position:absolute;top:100%;right:0;background-color:var(--color-surface-1);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;z-index:10;margin-top:var(--space-2)}.nav-user:hover .user-dropdown,.user-dropdown:hover,.user-dropdown.show{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0);transition:opacity .2s ease,transform .2s ease,visibility 0s linear}.dropdown-item{display:block;padding:var(--space-3) var(--space-4);color:var(--color-text-secondary);text-decoration:none;font-size:var(--text-sm);transition:all var(--transition-base);background:none;border:none;width:100%;text-align:left;cursor:pointer}.dropdown-item:hover{background-color:var(--color-surface-2);color:var(--color-text-primary)}.dropdown-item:first-child{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.dropdown-item:last-child{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.dropdown-divider{height:1px;background-color:var(--color-border-subtle);margin:var(--space-2) 0}.nav-auth{display:flex;gap:var(--space-3)}.test-mode-mobile,.auth-mobile{display:none}.test-mode-full,.auth-full{display:inline}.nav-link-mobile{display:none;background:transparent;border:none;color:var(--color-text-secondary);font-size:var(--text-lg);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:background-color .15s ease,color .15s ease}.nav-link-mobile:hover{background-color:var(--color-surface-1);color:var(--color-text-primary)}.nav-link-mobile.active{color:var(--color-primary);background-color:var(--color-surface-2)}@media (max-width: 768px){.navigation{background-color:#272522fa}.nav-container{height:48px;padding:0 var(--space-2)}.nav-logo{gap:var(--space-2);margin-right:var(--space-3)}.logo-icon{width:32px;height:32px;font-size:var(--text-base)}.logo-text,.nav-links{display:none}.nav-links-mobile{display:flex}.nav-links-mobile .nav-link{padding:var(--space-1) var(--space-2)}.nav-links-mobile .nav-link-icon{font-size:var(--text-base)}.nav-links-mobile .nav-link.active:after{display:none}.nav-stats,.nav-rating-display{display:none}.nav-right{gap:var(--space-2)}.test-mode-btn{padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.user-menu-trigger{padding:var(--space-1) var(--space-2);gap:var(--space-2)}.user-avatar{width:28px;height:28px;font-size:var(--text-xs)}.user-name{display:none}.dropdown-icon{width:10px;height:6px}.nav-auth .btn{padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.nav-auth .btn-secondary{display:none}.test-mode-mobile,.auth-mobile{display:inline}.test-mode-full,.auth-full{display:none}.nav-link-mobile{display:flex;align-items:center;justify-content:center}}.mobile-navigation{display:none}.mobile-tab-bar{position:fixed;bottom:0;left:0;right:0;background:#1a1a1af2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);z-index:1000;padding-bottom:env(safe-area-inset-bottom,0)}.mobile-tab-bar-inner{display:flex;justify-content:space-around;align-items:center;height:56px;padding:0 8px;overflow:hidden;touch-action:none}.mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;background:none;border:none;color:#fff9;text-decoration:none;cursor:pointer;transition:all .2s ease;position:relative;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.mobile-tab:active{transform:scale(.95)}.mobile-tab.active{color:var(--color-accent-primary, #81c784)}.mobile-tab.active:before{content:"";position:absolute;top:-1px;left:20%;right:20%;height:2px;background:var(--color-accent-primary, #81c784);border-radius:0 0 2px 2px}.mobile-tab-icon{font-size:24px;line-height:1;transition:transform .2s ease}.mobile-tab.active .mobile-tab-icon{transform:translateY(-2px)}.mobile-tab-label{font-size:11px;font-weight:500;margin-top:2px;letter-spacing:.3px}.mobile-header{position:fixed;top:0;left:0;right:0;background:#1a1a1af2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);z-index:999;transition:transform .3s ease}.mobile-header.hidden{transform:translateY(-100%)}.mobile-header-inner{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;padding-top:env(safe-area-inset-top,0)}.mobile-logo{display:flex;align-items:center;gap:8px;text-decoration:none}.mobile-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#81c784,#66bb6a);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#1a1a1a;box-shadow:0 2px 8px #81c7844d}.mobile-logo-text{font-size:18px;font-weight:600;color:#fff;letter-spacing:-.5px}.mobile-header-actions{display:flex;align-items:center;gap:8px}.mobile-action-btn{width:40px;height:40px;border-radius:12px;background:#ffffff1a;border:none!important;outline:none!important;color:#fffc;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mobile-action-btn:active{transform:scale(.95);background:#ffffff26}.mobile-user-btn{position:relative}.mobile-user-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#81c784,#66bb6a);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#1a1a1a}.mobile-online-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;background:#4caf50;border:2px solid #1a1a1a;border-radius:50%}.mobile-fab{position:fixed;bottom:76px;right:16px;width:56px;height:56px;background:linear-gradient(135deg,#81c784,#66bb6a);border-radius:16px;box-shadow:0 4px 16px #81c78466;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:999;border:none!important;outline:none!important;color:#1a1a1a;font-size:24px;font-weight:700;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mobile-fab:active{transform:scale(.95)}.mobile-fab.extended{width:auto;padding:0 20px;gap:8px}.mobile-fab-icon{font-size:24px}.mobile-fab-text{font-size:16px;font-weight:600;letter-spacing:.5px}.mobile-content-wrapper{padding-top:56px;padding-bottom:56px;padding-top:calc(56px + env(safe-area-inset-top,0));padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}@media (max-width: 768px){.mobile-navigation{display:block}.navigation{display:none}}@media (max-width: 360px){.mobile-tab-label{font-size:10px}.mobile-tab-icon{font-size:22px}.mobile-logo-text{font-size:16px}}@media (orientation: landscape) and (max-height: 500px){.mobile-header,.mobile-header-inner,.mobile-tab-bar-inner{height:48px}.mobile-logo-icon{width:32px;height:32px;font-size:16px}.mobile-fab{bottom:60px;width:48px;height:48px}}@media (prefers-color-scheme: dark){.mobile-header,.mobile-tab-bar{background:#121212f2}.mobile-action-btn{background:#ffffff14}}@media (prefers-contrast: high){.mobile-header,.mobile-tab-bar{border-width:2px}.mobile-tab.active:before{height:3px}}@media (prefers-reduced-motion: reduce){.mobile-tab,.mobile-action-btn,.mobile-fab,.mobile-header{transition:none}}.patch-notes-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.patch-notes-container{background-color:#1a1a1a;border-radius:12px;border:1px solid #333;max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000080}.patch-notes-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #333}.patch-notes-header h2{margin:0;color:#fff;font-size:24px}.patch-notes-close{background:none;border:none;color:#888;font-size:32px;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.patch-notes-close:hover{color:#fff}.patch-notes-content{overflow-y:auto;padding:20px;flex:1}.patch-note-entry{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #2a2a2a}.patch-note-entry:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.patch-note-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.patch-note-version{font-size:18px;font-weight:700;color:#4caf50}.patch-note-date{font-size:14px;color:#888}.patch-note-changes{list-style:none;padding:0;margin:0}.patch-note-changes li{display:flex;align-items:flex-start;margin-bottom:10px;color:#ccc;font-size:14px;line-height:1.5}.patch-note-icon{margin-right:10px;font-size:16px;flex-shrink:0}.patch-note-description{flex:1}.patch-note-feature .patch-note-icon{color:#4caf50}.patch-note-fix .patch-note-icon{color:#ff9800}.patch-note-performance .patch-note-icon{color:#2196f3}.patch-notes-content::-webkit-scrollbar{width:8px}.patch-notes-content::-webkit-scrollbar-track{background:#1a1a1a}.patch-notes-content::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.patch-notes-content::-webkit-scrollbar-thumb:hover{background:#444}@media (max-width: 600px){.patch-notes-overlay{padding:10px}.patch-notes-container{max-height:90vh}.patch-notes-header{padding:15px}.patch-notes-header h2{font-size:20px}.patch-notes-content{padding:15px}.patch-note-entry{margin-bottom:20px;padding-bottom:15px}.patch-note-version{font-size:16px}.patch-note-date{font-size:12px}.patch-note-changes li{font-size:13px}}#root{width:100%;min-height:100vh;margin:0;padding:0}.App{width:100%;min-height:100vh;display:flex;flex-direction:column}.App.mobile{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;background:var(--color-bg-primary)!important;touch-action:pan-y}.App.mobile .app-main{position:absolute;top:115px;bottom:56px;left:0;right:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:0!important;margin:0!important;background:var(--color-bg-primary)}.App.in-game{height:100vh;overflow:hidden}.App.in-game .app-main{flex:1;overflow:hidden}@media (max-width: 768px){.App.in-game.mobile .app-main{overflow-y:auto!important}}.status-bar{background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border-subtle);padding:var(--space-2) 0;flex-shrink:0}.status-bar-content{max-width:1200px;margin:0 auto;padding:0 var(--space-4);display:flex;justify-content:space-between;align-items:center}.game-counter{color:var(--color-text-muted);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-2)}.patch-notes-link{background:none;border:none;padding:4px 8px;margin-left:var(--space-2);cursor:pointer;font-size:var(--text-sm);color:var(--color-text-muted);opacity:.8;transition:opacity .2s,color .2s;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:4px}.patch-notes-link:hover{opacity:1;color:var(--color-text-primary);background-color:#ffffff0d}.connection-status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.connected{background-color:var(--color-success);box-shadow:0 0 0 2px #62976033}.status-dot.disconnected{background-color:var(--color-error);box-shadow:0 0 0 2px #ca343133}.auth-required-message{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:2rem}.auth-required-message h2{font-size:2rem;color:#fff;margin-bottom:1rem}.auth-required-message p{font-size:1.1rem;color:#94a3b8;margin-bottom:2rem;max-width:500px}.auth-required-message .sign-in-button{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;padding:.75rem 2rem;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease}.auth-required-message .sign-in-button:hover{transform:translateY(-2px);box-shadow:0 5px 20px #3b82f666}.app-main{flex:1 1 auto;overflow-y:auto;padding:var(--space-6) var(--space-4);max-width:1200px;margin:0 auto;width:100%;min-height:0}.connecting{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.connecting h2{color:var(--color-text-secondary);font-family:var(--font-primary);animation:pulse 2s infinite}.test-mode{padding:var(--space-8) var(--space-4)}.test-selector{text-align:center;max-width:600px;margin:0 auto}.test-selector h2{color:var(--color-text-primary);margin-bottom:var(--space-8);font-family:var(--font-primary)}.test-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-4);margin-bottom:var(--space-8)}.test-options button{padding:var(--space-8);font-size:var(--text-lg);background-color:var(--color-surface-2);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);font-weight:var(--font-medium);position:relative;overflow:hidden}.test-options button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent,rgba(129,199,132,.1));opacity:0;transition:opacity var(--transition-base)}.test-options button:hover{background-color:var(--color-surface-3);border-color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.test-options button:hover:before{opacity:1}.test-back{text-align:center;margin-top:var(--space-8)}.test-back button{padding:var(--space-3) var(--space-6);background-color:var(--color-button-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);font-weight:var(--font-medium)}.test-back button:hover{background-color:var(--color-button-secondary-hover);border-color:var(--color-border-strong);transform:translateY(-1px)}.nav-links{position:relative}.test-mode-toggle{position:absolute;right:-120px;top:50%;transform:translateY(-50%)}.test-mode-btn{padding:var(--space-2) var(--space-4);background-color:var(--color-accent-gold);color:var(--color-bg-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);font-size:var(--text-sm);font-weight:var(--font-semibold)}.test-mode-btn:hover{background-color:#e0b34c;transform:translateY(-1px);box-shadow:var(--shadow-sm)}@media (max-width: 768px){.app-main{padding:var(--space-4) var(--space-3)}.status-bar{position:fixed;top:56px;left:0;right:0;z-index:100}.status-bar-content{padding:0 var(--space-3)}.test-options{grid-template-columns:1fr}.test-options button{padding:var(--space-6);font-size:var(--text-base)}}@media (max-width: 480px){.app-main{padding:var(--space-3) var(--space-2)}.status-bar-content{padding:0 var(--space-2);font-size:var(--text-xs)}.test-selector h2{font-size:var(--text-xl)}.test-options button{padding:var(--space-5);font-size:var(--text-sm)}}@media (max-width: 768px){.auth-required-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;min-height:100%;margin:0}.auth-required-message h2{font-size:32px;font-weight:700;margin-bottom:16px;color:var(--color-text-primary);letter-spacing:-.5px}.auth-required-message p{font-size:18px;color:var(--color-text-secondary);margin-bottom:48px;line-height:1.6;max-width:320px}.auth-required-message .sign-in-button{width:100%;max-width:320px;padding:20px 40px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:var(--color-bg-primary);border:none;border-radius:16px;font-size:18px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 16px #81c7844d}.auth-required-message .sign-in-button:active{transform:scale(.95)}.auth-required-message:before{content:"🎖️";font-size:80px;margin-bottom:32px;display:block}}@media (max-width: 768px){.badge-notification{right:16px;left:16px;bottom:80px;max-width:none;border-radius:16px}.badge-notification-content{padding:16px}.badge-notification-icon{width:48px;height:48px;font-size:24px}.badge-notification-title{font-size:16px}.badge-notification-name{font-size:18px}.badge-notification-description{font-size:13px}.badge-notification-points{font-size:14px}}@media (max-width: 768px){html,body{overflow-x:hidden!important;max-width:100vw!important;background:var(--color-bg-primary)!important}*{max-width:100vw!important}.game-screen .game-content,.mobile-game-screen .mobile-game-area{max-height:none!important;overflow-y:auto!important}.App,.app-main,.badges-page,.badge-gallery-container,.auth-required-message,.mobile-navigation,.mobile-header,.mobile-tab-bar{max-width:100vw!important;overflow-x:hidden!important}button,input,textarea,select{max-width:100%!important}button{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.mobile-fab,.mobile-action-btn,.mobile-tab{border:none!important;outline:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.badge-grid,.badge-card,.badge-categories,.badge-filter-container{max-width:100%!important;overflow-x:hidden!important}.badge-categories{margin-left:0!important;margin-right:0!important;width:100%!important}.badge-gallery-container{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important}.auth-modal-backdrop,.auth-modal,.badge-detail-modal-backdrop,.badge-detail-modal{max-width:100vw!important;overflow-x:hidden!important}}