:root{--primary-text: #2d1b12;--secondary-text: #5d4037;--tertiary-text: #8d6e63;--primary-brand: #7a4a2e;--primary-brand-hover: #5d3822;--success: #6ab04c;--danger: #a64452;--warning: #f9ca24;--bg-app: #f5f1ea;--bg-card: #fffef0;--border-color: #d7ccc8;--bg-gray-light: #ece7e0;--text-white: #ffffff;--toggle-off: #bdc3c7;--badge-blue-bg: #e1f5fe;--badge-blue-text: #0288d1;--badge-yellow-bg: #fff9c4;--badge-yellow-text: #fbc02d;--badge-green-bg: #e8f5e9;--badge-purple-bg: #f3e5f5;--badge-purple-text: #7b1fa2;--team-red-bg: #a64452;--team-blue-bg: #457b9d;--team-green-bg: #6b9080;--team-yellow-bg: #e9c46a;--team-purple-bg: #6d597a;--team-cyan-bg: #81b29a;--team-orange-bg: #e07a5f;--team-pink-bg: #d4a373;--team-red-light: #f2d7d9;--team-blue-light: #d1dae3;--team-green-light: #dce6e1;--team-yellow-light: #f4e9cd;--team-purple-light: #e2dae3;--team-cyan-light: #e2ede8;--team-orange-light: #f4ded8;--team-pink-light: #faedcd;--shadow-subtle: rgba(45, 27, 18, .1);--shadow-medium: rgba(45, 27, 18, .2);--shadow-success: rgba(46, 204, 113, .4);--overlay-dark: rgba(45, 27, 18, .5);--error-bg: #fdeded;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--primary-text);background-color:var(--bg-app);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--primary-brand);text-decoration:inherit}a:hover{color:var(--primary-brand-hover)}html,body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;max-width:100vw}#root{min-height:100vh;overflow-x:hidden;max-width:100vw}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid var(--border-color);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-card);color:var(--primary-text);cursor:pointer;transition:border-color .25s,background-color .25s}button:hover{border-color:var(--primary-brand);background-color:var(--bg-gray-light)}button:focus,button:focus-visible{outline:4px auto var(--primary-brand)}[data-piece^=w]{filter:var(--white-piece-filter, none)!important}[data-piece^=b]{filter:var(--black-piece-filter, none)!important}#root{min-height:100vh}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover,.logo.react:hover{filter:drop-shadow(0 0 2em var(--shadow-medium))}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:var(--secondary-text)}.homepage{height:100vh;display:flex;flex-direction:column;background-color:var(--bg-app);overflow:hidden;max-width:100vw}.homepage-header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);padding:16px 30px;display:flex;justify-content:space-between;align-items:center}.homepage-title{margin:0;font-size:24px;color:var(--primary-text);transition:color .2s}.homepage-title:hover{color:var(--primary-brand)}.header-user{display:flex;align-items:center;gap:15px}.homepage-main{flex:1;padding:30px;max-width:900px;margin:0 auto;width:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow-x:visible;overflow-y:auto;min-height:0}.action-buttons{display:flex;gap:15px;margin-bottom:30px;justify-content:center}.btn-primary{padding:10px 20px;font-size:16px;cursor:pointer;background-color:var(--primary-brand);color:var(--text-white);border:none;border-radius:6px;transition:background-color .2s}.btn-primary:hover{background-color:var(--primary-brand-hover)}.btn-secondary{padding:10px 20px;font-size:16px;cursor:pointer;background-color:var(--bg-card);color:var(--primary-text);border:1px solid var(--border-color);border-radius:6px;transition:all .2s}.btn-secondary:hover{border-color:var(--primary-brand);color:var(--primary-brand)}.lobby-section{background-color:var(--bg-card);border-radius:8px;padding:20px;box-shadow:0 1px 3px var(--shadow-subtle);flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:600px;margin:0 auto;width:100%;min-height:0;box-sizing:border-box}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.lobby-header h2{margin:0;font-size:18px;color:var(--primary-text)}.live-indicator{font-size:12px;color:var(--success);font-weight:500}.lobby-loading{text-align:center;padding:20px;color:var(--secondary-text)}.lobby-empty{text-align:center;padding:40px 20px;color:var(--secondary-text);background-color:var(--bg-gray-light);border-radius:8px}.lobby-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;flex:1;padding-right:8px;min-height:0}.lobby-list::-webkit-scrollbar{width:8px}.lobby-list::-webkit-scrollbar-track{background:var(--bg-app);border-radius:4px}.lobby-list::-webkit-scrollbar-thumb{background:var(--tertiary-text);border-radius:4px}.lobby-list::-webkit-scrollbar-thumb:hover{background:var(--secondary-text)}.lobby-game-card{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s}.lobby-game-card:hover{border-color:var(--primary-brand);box-shadow:0 2px 8px var(--shadow-subtle)}.lobby-game-info{display:flex;align-items:center;gap:20px}.lobby-grid-size{font-size:16px;font-weight:600;color:var(--primary-text)}.lobby-game-host{color:var(--secondary-text);font-size:14px}.lobby-game-stats{display:flex;align-items:center;gap:20px}.lobby-stat{font-size:14px;color:var(--primary-text)}.lobby-player-count{background-color:var(--badge-blue-bg);color:var(--primary-brand-hover);padding:4px 12px;border-radius:12px;font-size:14px;font-weight:500}.lobby-tabs{display:flex;align-items:center;gap:8px;margin-bottom:15px;border-bottom:1px solid var(--border-color);padding-bottom:12px}.lobby-tab{padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;background:none;border:none;color:var(--secondary-text);border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:8px}.lobby-tab:hover{background-color:var(--bg-app);color:var(--primary-text)}.lobby-tab.active{background-color:var(--badge-blue-bg);color:var(--primary-brand-hover)}.lobby-tab-badge{background-color:var(--primary-brand);color:var(--text-white);padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600}.lobby-tab.active .lobby-tab-badge{background-color:var(--primary-brand-hover)}.my-game-status{padding:4px 12px;border-radius:12px;font-size:13px;font-weight:500}.my-game-status-waiting{background-color:var(--badge-yellow-bg);color:var(--badge-yellow-text)}.my-game-status-started{background-color:var(--badge-green-bg);color:var(--success)}.my-game-private{background-color:var(--badge-purple-bg);color:var(--badge-purple-text);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}.my-game-team{font-size:13px;color:var(--secondary-text)}.login-prompt{text-align:center;padding:60px 20px;color:var(--secondary-text)}.create-game-container{background-color:var(--bg-card);border-radius:12px;padding:30px;box-shadow:0 4px 20px var(--shadow-subtle);max-width:600px;margin:0 auto;width:100%;box-sizing:border-box}.create-game-header{text-align:center;margin-bottom:20px}.create-game-header h2{margin:0;font-size:24px;color:var(--primary-text);font-weight:600}.form-group{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.form-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px;width:100%;max-width:100%;box-sizing:border-box}.form-row .input-group{flex:1 1 calc(50% - 10px);min-width:150px}.input-group{display:flex;flex-direction:column;margin-bottom:15px;min-width:0}.input-group label{margin-bottom:8px;font-weight:500;color:var(--primary-text);font-size:14px}.input-group:last-child{margin-bottom:0}.switch-label{display:flex;align-items:center;gap:10px;cursor:pointer}.toggle-checkbox{opacity:0;position:absolute;width:0;height:0}.toggle-switch{position:relative;display:inline-block;width:46px;height:24px;background-color:var(--toggle-off);border-radius:12px;transition:background-color .3s}.toggle-switch:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform .3s}.toggle-checkbox:checked+.toggle-switch{background-color:var(--primary-brand)}.toggle-checkbox:checked+.toggle-switch:after{transform:translate(22px)}.toggle-label{font-size:16px;color:var(--primary-text);font-weight:500}.password-fields-simple{display:flex;flex-direction:column;gap:15px;margin-top:10px}.modal-input{padding:12px;font-size:16px;border:1px solid var(--border-color);border-radius:6px;transition:border-color .2s;box-sizing:border-box;max-width:100%}.form-actions{display:flex;gap:15px;margin-top:10px}.btn-large{padding:14px 24px;font-size:16px;font-weight:500;border-radius:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.modal-overlay{position:fixed;inset:0;background-color:var(--overlay-dark);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background-color:var(--bg-card);padding:30px;border-radius:8px;display:flex;flex-direction:column;gap:15px;min-width:300px}.modal h2{margin:0;color:var(--primary-text)}.modal-input{padding:12px;font-size:16px;border:1px solid var(--border-color);border-radius:6px;transition:border-color .2s;box-sizing:border-box}.modal-input:focus{outline:none;border-color:var(--primary-brand);box-shadow:0 0 0 2px var(--shadow-subtle)}.modal-error{color:var(--danger);margin:0;font-size:14px;padding:10px;background-color:var(--error-bg);border-radius:6px;border-left:3px solid var(--danger)}.modal-buttons{display:flex;gap:10px;justify-content:flex-end}@media(max-width:900px){.game-layout{flex-direction:column;align-items:center}.team-sidebars{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}.team-sidebar-item{width:180px}}@media(max-width:600px){.homepage-header{padding:12px 16px}.homepage-title{font-size:20px}.header-user{gap:10px}.header-user span{display:none}.homepage-main{padding:16px}.action-buttons{flex-direction:column;gap:10px;margin-bottom:20px}.action-buttons button{width:100%}.lobby-section{padding:16px;max-width:none}.lobby-header h2{font-size:16px}.lobby-game-card{padding:12px 16px;flex-direction:column;gap:10px;align-items:flex-start;box-sizing:border-box;max-width:100%}.lobby-game-info{gap:12px;max-width:100%;overflow:hidden}.lobby-game-stats{width:100%;justify-content:space-between}.lobby-list{padding-right:0}.lobby-tabs{gap:4px}.lobby-tab{padding:8px 12px;font-size:13px}.my-game-card .lobby-game-stats{flex-wrap:wrap;gap:8px}.modal{min-width:auto;width:calc(100% - 24px);max-width:400px;padding:20px;margin:12px}.btn-primary,.btn-secondary{padding:12px 20px;min-height:44px}.modal-input{min-height:44px;font-size:16px}.game-lobby-header{padding:12px 16px}.game-info-banner{padding:12px 16px;flex-direction:column;gap:8px}.team-card-lobby{width:100%!important;min-height:200px!important}.teams-container{padding:16px!important;gap:16px!important}.game-layout{flex-direction:column;padding:12px!important;gap:12px!important}.team-sidebars{order:1;width:100%;flex-direction:row;flex-wrap:wrap;gap:8px;padding-top:0}.team-sidebar-item{flex:1;min-width:140px;max-width:50%}.game-board-container{order:0;width:auto}.minigame-modal-content{flex-direction:column!important;gap:16px!important;max-height:90vh;overflow-y:auto}.minigame-puzzle-panel{padding:16px!important}.minigame-board-preview{display:flex!important;order:1;width:100%;padding:12px!important}}@media(max-width:375px){.homepage-header{padding:10px 12px}.homepage-main,.lobby-section{padding:12px}.team-sidebar-item{min-width:120px}}@media(max-width:600px){.create-game-container{padding:20px;margin:0 auto}.create-game-header h2{font-size:22px}.create-game-subtitle{font-size:14px}.form-row{flex-direction:column;gap:15px}.form-row .input-group{flex:1 1 100%;min-width:auto}.password-fields-simple{padding-left:0}.form-actions{flex-direction:column}.btn-large{width:100%;text-align:center}}@media(max-width:400px){.create-game-container{padding:16px}.create-game-header{margin-bottom:20px}.create-game-header h2{font-size:20px}.input-group label{font-size:13px}.toggle-label{font-size:15px}}