:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{width:100%;min-height:100vh;padding:0;text-align:left}.auth-container{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:2rem;max-width:480px;margin:0 auto;text-align:center}.auth-container h1{font-size:2em;margin-bottom:.5rem}.auth-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:360px}.auth-form label{display:flex;flex-direction:column;gap:.3rem;text-align:left;font-size:.9em;color:#ffffffb3}.auth-form input{padding:.7em 1em;border-radius:8px;border:1px solid #444;background-color:#1a1a1a;color:#fff;font-size:1em;font-family:inherit;outline:none;transition:border-color .25s}.auth-form input:focus{border-color:#646cff}.auth-form button{margin-top:.5rem;padding:.7em 1.2em;border-radius:8px;border:none;background-color:#646cff;color:#fff;font-size:1em;font-weight:500;cursor:pointer;transition:background-color .25s}.auth-form button:hover:not(:disabled){background-color:#535bf2}.auth-form button:disabled{opacity:.6;cursor:not-allowed}.error{color:#ff6b6b;margin:0;font-size:.9em}.success{color:#51cf66;margin:0;font-size:.9em}.auth-link{font-size:.9em;color:#fff9}.auth-link a{color:#646cff}.home-card{background-color:#1a1a1a;border-radius:12px;padding:2rem 2.5rem;width:100%;max-width:360px}.home-card p:first-child{margin:0 0 .3rem;color:#ffffff80;font-size:.9em}.user-email{margin:0;font-size:1.2em;color:#646cff;word-break:break-all}.logout-btn{margin-top:1rem;padding:.6em 2em;border-radius:8px;border:1px solid #444;background-color:transparent;color:#ffffffb3;font-size:.9em;cursor:pointer;transition:border-color .25s,color .25s}.logout-btn:hover{border-color:#ff6b6b;color:#ff6b6b}.email-popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.email-popup{background:#1a1a1a;border:1px solid #444;border-radius:12px;width:90%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.email-popup-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid #333}.email-popup-header h2{margin:0;font-size:1.1em}.email-popup-close{background:none;border:none;color:#fff9;font-size:1.5em;cursor:pointer;padding:0 .3em;line-height:1}.email-popup-close:hover{color:#ff6b6b}.email-popup-body{padding:1.5rem;overflow-y:auto;color:#ddd;text-align:left;font-size:.95em;line-height:1.5}.app-shell{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background-color:#1a1a1a;border-bottom:1px solid #333}.app-title{font-size:1.1em;font-weight:700;color:#646cff;flex:1}.app-user{font-size:.85em;color:#ffffff80}.app-header .logout-btn{padding:.35em 1em;font-size:.85em;border:1px solid #555;background:transparent;color:#ffffffb3;border-radius:6px;cursor:pointer;transition:border-color .2s,color .2s}.app-header .logout-btn:hover{border-color:#ff6b6b;color:#ff6b6b}.app-nav{display:flex;background-color:#1a1a1a;border-bottom:2px solid #333;padding:0 1.5rem}.nav-tab{padding:.7em 1.5em;color:#ffffff80;text-decoration:none;font-size:.95em;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}.nav-tab:hover{color:#ffffffd9}.nav-tab.active{color:#646cff;border-bottom-color:#646cff}.app-content{flex:1;padding:1.5rem;max-width:1200px;width:100%;box-sizing:border-box}.page-status{color:#ffffff80;font-size:.95em}.page-ranking h2{margin:0 0 1.25rem}.ranking-table{width:100%;border-collapse:collapse;font-size:.95em}.ranking-table th,.ranking-table td{padding:.6rem 1rem;text-align:left;border-bottom:1px solid #333}.ranking-table th{color:#ffffff80;font-weight:500;font-size:.85em;text-transform:uppercase;letter-spacing:.05em}.rank-pos{color:#fff6;width:2.5rem}.rank-email{color:#fff}.rank-win{color:#51cf66;font-weight:600}.rank-loss{color:#ff6b6b;font-weight:600}.rank-draw{color:#aaa}.page-games h2{margin:0 0 1rem}.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.filter-group{display:flex;gap:.4rem}.filter-chip{padding:.3em .9em;border-radius:20px;border:1px solid #555;background:transparent;color:#fff9;font-size:.85em;cursor:pointer;transition:all .2s}.filter-chip:hover{border-color:#646cff;color:#fff}.filter-chip.active{background-color:#646cff;border-color:#646cff;color:#fff}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.game-card{background-color:#1a1a1a;border:1px solid #333;border-radius:10px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s}.game-card:hover{border-color:#555}.game-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.game-name{font-weight:600;font-size:1em;color:#fff}.game-status-badge{font-size:.72em;padding:.2em .6em;border-radius:10px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}.game-board{margin:0;font-size:.85em;color:#ffffff80}.game-owner{margin:0;font-size:.85em;color:#fff9}.game-players-info{display:flex;align-items:center;gap:.6rem;font-size:.82em;color:#ffffff80}.random-badge{background-color:#3a3a3a;border-radius:4px;padding:.1em .5em;color:#ffffff80}.page-new-game h2{margin:0 0 1.25rem}.boards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.board-card{background-color:#1a1a1a;border:1px solid #333;border-radius:10px;padding:0;cursor:pointer;text-align:left;overflow:hidden;transition:border-color .2s,transform .15s;display:flex;flex-direction:column}.board-card:hover{border-color:#646cff;transform:translateY(-2px)}.board-svg-thumb{width:100%;height:140px;object-fit:cover;background-color:#111;display:block}.board-info{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.2rem}.board-name{font-size:.95em;color:#fff}.board-meta{font-size:.8em;color:#ffffff73}.new-game-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}.new-game-header h2{margin:0}.back-btn{background:transparent;border:1px solid #555;color:#fff9;border-radius:6px;padding:.3em .8em;cursor:pointer;font-size:.9em;transition:border-color .2s,color .2s}.back-btn:hover{border-color:#646cff;color:#fff}.new-game-layout{display:grid;grid-template-columns:340px 1fr;gap:2rem;align-items:start}@media(max-width:760px){.new-game-layout{grid-template-columns:1fr}}.board-preview{display:flex;flex-direction:column;gap:1rem}.board-svg-preview{width:100%;border-radius:8px;background-color:#111;border:1px solid #333}.board-details{font-size:.9em;color:#ffffffb3;line-height:1.6}.board-details p{margin:.2rem 0}.powers-list{margin:.2rem 0 0 1.2rem;padding:0;color:#fff9}.new-game-form{display:flex;flex-direction:column;gap:1rem}.new-game-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.9em;color:#ffffffb3}.new-game-form input[type=text],.new-game-form select{padding:.6em .9em;border-radius:8px;border:1px solid #444;background-color:#1a1a1a;color:#fff;font-size:1em;font-family:inherit;outline:none;transition:border-color .25s}.new-game-form input[type=text]:focus,.new-game-form select:focus{border-color:#646cff}.toggle-label{flex-direction:row!important;align-items:center!important;gap:.5rem!important;cursor:pointer}.toggle-label input[type=checkbox]{width:1em;height:1em;accent-color:#646cff}.ai-slots{display:flex;flex-direction:column;gap:.5rem}.ai-slots-title{margin:0 0 .25rem;font-size:.85em;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em}.ai-slot-label{display:flex;flex-direction:row!important;align-items:center!important;gap:.75rem!important;font-size:.88em;color:#fff9}.ai-slot-label select{flex:1}.submit-btn{margin-top:.5rem;padding:.7em 1.4em;border-radius:8px;border:none;background-color:#646cff;color:#fff;font-size:1em;font-weight:600;cursor:pointer;transition:background-color .25s}.submit-btn:hover:not(:disabled){background-color:#535bf2}.submit-btn:disabled{opacity:.6;cursor:not-allowed}