:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}html,body{background:var(--bg);margin:0;transition:background-color .3s}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.main-menu-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;width:100%;height:100vh;padding:1rem;display:flex}.main-menu{background:#fff;border-radius:20px;width:100%;max-width:900px;padding:2rem;box-shadow:0 20px 60px #0000004d}.dark-mode .main-menu{color:#fff;background:#1a1a2e}.menu-header{text-align:center;margin-bottom:2rem}.menu-header h1{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 .5rem;font-size:2.5rem}.dark-mode .menu-header h1{color:#a8dadc}.menu-header p{color:#666;margin:0;font-size:1rem}.dark-mode .menu-header p{color:#ccc}.menu-content{flex-wrap:wrap;align-items:flex-start;gap:2rem;display:flex}.board-section{flex-direction:column;flex:1;gap:1rem;min-width:300px;display:flex}.board-stats{text-align:center;color:#333;font-size:1.1rem;font-weight:700}.dark-mode .board-stats{color:#fff}.bingo-grid{aspect-ratio:1;background:#f9f9f9;border-radius:15px;gap:.5rem;padding:1rem;display:grid;box-shadow:inset 0 2px 5px #0000001a}.dark-mode .bingo-grid{background:#2a2a3e;box-shadow:inset 0 2px 5px #00000080}.bingo-cell{cursor:pointer;text-align:center;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border:2px solid #ddd;border-radius:10px;justify-content:center;align-items:center;padding:.5rem;font-size:.9rem;font-weight:700;transition:all .3s;display:flex;position:relative;overflow:hidden}.dark-mode .bingo-cell{color:#fff;background:linear-gradient(135deg,#3a3a50 0%,#2a2a40 100%);border-color:#555}.bingo-cell:hover:not(.empty-cell){transform:scale(1.05);box-shadow:0 4px 12px #00000026}.bingo-cell.marked{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea;box-shadow:0 4px 12px #667eea66}.empty-cell-link{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:100%;padding:10px;display:flex}.empty-cell-link .text-link{color:#667eea;cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;font-weight:600;text-decoration:underline;transition:all .2s}.empty-cell-link .text-link:hover{color:#764ba2;text-decoration:none;transform:scale(1.1)}.dark-mode .empty-cell-link .text-link{color:#a8b8ff}.dark-mode .empty-cell-link .text-link:hover{color:#d4a5ff}.cell-content{word-break:break-word;justify-content:center;align-items:center;width:100%;height:100%;line-height:1.2;display:flex}.cell-content img{object-fit:contain;max-width:100%;max-height:100%}.checkmark{color:#fff;text-shadow:0 2px 4px #0000004d;font-size:1.5rem;font-weight:700;animation:.3s ease-out scaleIn;position:absolute}@keyframes scaleIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.button-panel{flex-flow:wrap;justify-content:center;gap:1rem;width:100%;display:flex}.button-group-vertical{flex-direction:row;flex:1;justify-content:center;gap:.75rem;min-width:auto;display:flex}.btn-primary,.btn-secondary{cursor:pointer;text-align:center;white-space:nowrap;border:none;border-radius:10px;flex:1;min-width:140px;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;transition:all .3s}.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 4px 15px #667eea66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.btn-secondary{color:#333;background:#f0f0f0;border:2px solid #ddd}.dark-mode .btn-secondary{color:#fff;background:#3a3a50;border-color:#555}.btn-secondary:hover{background:#e0e0e0;transform:translateY(-2px)}.dark-mode .btn-secondary:hover{background:#4a4a60}@media (width<=768px){.main-menu{padding:1rem}.menu-header h1{font-size:2rem}.menu-content{flex-direction:column;gap:1.5rem}.button-panel{flex-direction:row;gap:1rem;width:100%}.button-group-vertical{flex-direction:row;flex:1;gap:.5rem}.btn-primary,.btn-secondary{padding:.6rem 1rem;font-size:.9rem}}.confirmation-dialog-overlay{z-index:2000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirmation-dialog-modal{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;width:90%;max-width:500px;padding:32px;animation:.2s ease-out slideUp;box-shadow:0 20px 60px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.confirmation-dialog-modal h3{margin:0 0 16px;font-size:20px;font-weight:600}.confirmation-dialog-modal p{opacity:.95;margin:0 0 24px;font-size:16px;line-height:1.5}.confirmation-dialog-actions{justify-content:flex-end;gap:12px;display:flex}.confirmation-dialog-actions button{cursor:pointer;border:none;border-radius:8px;min-width:100px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.confirmation-dialog-actions .btn-primary{color:#667eea;background-color:#fff}.confirmation-dialog-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0003}.confirmation-dialog-actions .btn-danger{color:#fff;background-color:#ef4444}.confirmation-dialog-actions .btn-danger:hover{background-color:#dc2626;transform:translateY(-2px);box-shadow:0 8px 16px #ef44444d}.confirmation-dialog-actions .btn-secondary{color:#fff;background-color:#fff3;border:1px solid #ffffff4d}.confirmation-dialog-actions .btn-secondary:hover{background-color:#ffffff4d;border-color:#fff6}.dark-mode .confirmation-dialog-modal{background:linear-gradient(135deg,#2d3561 0%,#1e1b47 100%);box-shadow:0 20px 60px #00000080}.dark-mode .confirmation-dialog-actions .btn-primary{color:#fff;background-color:#667eeae6}.dark-mode .confirmation-dialog-actions .btn-primary:hover{background-color:#667eea;box-shadow:0 8px 16px #667eea4d}.dark-mode .confirmation-dialog-actions .btn-secondary{color:#e0e7ff;background-color:#ffffff1a;border-color:#fff3}.dark-mode .confirmation-dialog-actions .btn-secondary:hover{background-color:#ffffff26;border-color:#ffffff4d}.square-builder{background:#fff;border-radius:12px;width:100%;max-width:800px;padding:40px;box-shadow:0 10px 40px #0003}.square-builder h2{color:#667eea;margin-top:0;margin-bottom:10px}.help-text{color:#888;margin:0 0 25px;font-size:14px;font-style:italic}.input-section{margin-bottom:30px}.text-input{resize:vertical;box-sizing:border-box;border:2px solid #e0e0e0;border-radius:8px;width:100%;height:150px;margin-bottom:15px;padding:15px;font-family:Courier New,monospace;font-size:14px}.text-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.squares-list{margin-bottom:30px}.squares-list h3{color:#666;margin-bottom:15px}.squares-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px;display:flex}.squares-header h3{color:#666;margin:0}.selection-buttons{gap:10px;display:flex}.btn-select-all,.btn-deselect-all,.btn-remove-duplicates,.btn-restore-defaults,.btn-export,.btn-import{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s}.btn-select-all:hover,.btn-deselect-all:hover,.btn-remove-duplicates:hover,.btn-restore-defaults:hover,.btn-export:hover,.btn-import:hover{background:#764ba2;transform:translateY(-1px)}.btn-deselect-all{background:#999}.btn-deselect-all:hover{background:#777}.btn-remove-duplicates{color:#333;background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%)}.btn-remove-duplicates:hover{background:linear-gradient(135deg,#fed6e3 0%,#a8edea 100%);box-shadow:0 4px 12px #a8edea4d}.btn-restore-defaults{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.btn-restore-defaults:hover:not(:disabled){background:linear-gradient(135deg,#764ba2 0%,#667eea 100%);transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.btn-restore-defaults:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#ccc 0%,#bbb 100%)}.btn-export{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.btn-export:hover{background:linear-gradient(135deg,#f5576c 0%,#f093fb 100%);box-shadow:0 4px 12px #f5576c4d}.btn-import{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);display:inline-block}.btn-import:hover{background:linear-gradient(135deg,#00f2fe 0%,#4facfe 100%);box-shadow:0 4px 12px #4facfe4d}.btn-remove-selected{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b 0%,#ff5252 100%);border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s}.btn-remove-selected:hover:not(:disabled){background:linear-gradient(135deg,#ff5252 0%,#ff6b6b 100%);transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b4d}.btn-remove-selected:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#ccc 0%,#bbb 100%)}.squares-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;margin-bottom:20px;display:grid}.square-item{text-align:center;cursor:pointer;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;min-height:100px;padding:15px;transition:all .2s;display:flex;position:relative;overflow:hidden}.square-item:hover{background:#f0f0ff;border-color:#667eea}.square-item.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.square-item.selected span{color:#fff}.square-checkbox-wrapper{margin-bottom:8px}.square-checkbox{cursor:pointer;accent-color:#667eea;width:18px;height:18px}.btn-remove{color:#fff;cursor:pointer;background:#ff6b6b;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:16px;transition:all .2s;display:flex;position:absolute;top:5px;right:5px}.btn-remove:hover{background:#ff5252;transform:scale(1.1)}.btn-add,.btn-confirm{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:600;transition:all .3s}.btn-add{width:100%;margin-bottom:20px;display:block}.btn-add:hover,.btn-confirm:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea4d}.button-container{justify-content:center;margin-top:30px;display:flex}.btn-confirm{margin:0;display:inline-block}.app.dark-mode .square-builder{color:#fff;background:#2a2a3e}.app.dark-mode .square-builder h2{color:#a0d8ff}.app.dark-mode .help-text{color:#b0b0b0}.app.dark-mode .text-input{color:#fff;background:#1a1a2e;border-color:#fff3}.app.dark-mode .text-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.app.dark-mode .squares-list h3{color:#a0d8ff}.app.dark-mode .btn-select-all,.app.dark-mode .btn-deselect-all,.app.dark-mode .btn-remove-duplicates,.app.dark-mode .btn-restore-defaults,.app.dark-mode .btn-export,.app.dark-mode .btn-import{color:#fff;background:#667eea}.app.dark-mode .btn-select-all:hover,.app.dark-mode .btn-remove-duplicates:hover,.app.dark-mode .btn-restore-defaults:hover,.app.dark-mode .btn-export:hover,.app.dark-mode .btn-import:hover{background:#764ba2}.app.dark-mode .btn-deselect-all{background:#666}.app.dark-mode .btn-deselect-all:hover{background:#555}.app.dark-mode .btn-remove-duplicates{color:#333;background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%)}.app.dark-mode .btn-remove-duplicates:hover{background:linear-gradient(135deg,#fed6e3 0%,#a8edea 100%)}.app.dark-mode .btn-export{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.app.dark-mode .btn-export:hover{background:linear-gradient(135deg,#f5576c 0%,#f093fb 100%)}.app.dark-mode .btn-import{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.app.dark-mode .btn-import:hover{background:linear-gradient(135deg,#00f2fe 0%,#4facfe 100%)}.app.dark-mode .btn-remove-selected{background:linear-gradient(135deg,#ff6b6b 0%,#ff5252 100%)}.app.dark-mode .btn-remove-selected:hover:not(:disabled){background:linear-gradient(135deg,#ff5252 0%,#ff6b6b 100%);box-shadow:0 4px 12px #ff6b6b4d}.app.dark-mode .btn-remove-selected:disabled{background:linear-gradient(135deg,#555 0%,#444 100%)}.app.dark-mode .square-item{color:#fff;background:#1a1a2e;border-color:#fff3}.app.dark-mode .square-item:hover{background:#252541;border-color:#667eea}.app.dark-mode .square-item.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}@media (width<=768px){.square-builder{padding:20px}.squares-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.grid-setup{background:#fff;border-radius:12px;width:100%;max-width:1000px;padding:40px;box-shadow:0 10px 40px #0003}.btn-back{color:#667eea;cursor:pointer;background:#667eea33;border:2px solid #667eea;border-radius:6px;margin-bottom:20px;padding:8px 16px;font-weight:600;transition:all .3s}.grid-setup h2{color:#667eea;margin:0 0 30px}.setup-controls{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:40px;display:grid}.control-group{flex-direction:column;gap:8px;display:flex}.control-group label{color:#666;font-size:14px;font-weight:600}.control-group input,.control-group select{color:#333;background:#fff;border:2px solid #e0e0e0;border-radius:6px;padding:10px;font-size:14px}.control-group input:focus,.control-group select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.manual-controls{grid-template-columns:1fr 1fr;gap:30px;margin-bottom:40px;display:grid}.available-squares{flex-direction:column;gap:15px;display:flex}.available-squares h3{color:#666;margin:0}.available-squares .squares-list{border:2px dashed #e0e0e0;border-radius:8px;max-height:400px;padding:15px;overflow-y:auto}.square-item.draggable{text-align:center;cursor:grab;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:6px;justify-content:center;align-items:center;min-height:80px;padding:12px;transition:all .2s;display:flex;position:relative;overflow:hidden}.square-item.draggable:hover{background:#f0f0ff;border-color:#667eea;transform:scale(1.02)}.square-item.draggable.selected{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:inset 0 0 10px #667eea33}.square-item img{object-fit:cover;max-width:100%;max-height:70px}.square-item span{word-wrap:break-word;color:#333;font-size:12px;line-height:1.2}.btn-generate{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;width:100%;padding:12px;font-weight:600;transition:all .3s}.btn-generate:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.grid-preview{margin-bottom:30px}.grid-preview h3{color:#666;margin:0 0 20px}.grid{background:#f9f9f9;border-radius:8px;gap:15px;margin-bottom:20px;padding:20px;display:grid}.grid-cell{aspect-ratio:1;cursor:pointer;text-align:center;background:#fff;border:2px solid #e0e0e0;border-radius:8px;justify-content:center;align-items:center;min-height:100px;padding:10px;transition:all .2s;display:flex;overflow:hidden}.grid-cell:hover{background:#f0f0ff;border-color:#667eea}.grid-cell img{object-fit:cover;max-width:100%;max-height:100%}.grid-cell span{color:#333;word-wrap:break-word;font-size:13px;line-height:1.3}.grid-cell .empty{color:#999;font-size:12px;font-style:italic}.action-buttons{justify-content:center;align-items:center;gap:15px;display:flex}.btn-shuffle,.btn-confirm{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;max-width:300px;height:48px;padding:12px 14px;font-size:16px;font-weight:600;line-height:1.2;transition:all .3s;display:flex}.btn-confirm{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.btn-shuffle:hover:not(:disabled),.btn-confirm:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.app.dark-mode .grid-setup{color:#fff;background:#2a2a3e}.app.dark-mode .grid-setup h2{color:#a0d8ff}.app.dark-mode .btn-back{color:#a0d8ff;background:#667eea4d;border-color:#667eea}.app.dark-mode .btn-back:hover{background:#667eea66}.app.dark-mode .control-group label{color:#a0d8ff}.app.dark-mode .control-group input,.app.dark-mode .control-group select{color:#fff;background:#1a1a2e;border-color:#fff3}.app.dark-mode .control-group input:focus,.app.dark-mode .control-group select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.app.dark-mode .available-squares h3{color:#a0d8ff}.app.dark-mode .available-squares .squares-list{background:#1a1a2e;border-color:#fff3}.app.dark-mode .square-item.draggable{color:#fff;background:#1a1a2e;border-color:#fff3}.app.dark-mode .square-item.draggable:hover{background:#252541;border-color:#667eea}.app.dark-mode .square-item.draggable.selected{background:#667eea33;border-color:#667eea;box-shadow:inset 0 0 10px #667eea26}.app.dark-mode .square-item span{color:#fff}.app.dark-mode .grid-preview,.app.dark-mode .grid-preview h3{color:#a0d8ff}.app.dark-mode .grid{background:#1a1a2e}.app.dark-mode .grid-cell{color:#fff;background:#2a2a3e;border-color:#fff3}.app.dark-mode .grid-cell:hover{background:#252541;border-color:#667eea}.app.dark-mode .grid-cell span{color:#fff}.app.dark-mode .grid-cell .empty{color:#a0d8ff}@media (width<=768px){.grid-setup{padding:20px}.manual-controls,.setup-controls{grid-template-columns:1fr}.action-buttons{flex-direction:column}.btn-shuffle,.btn-confirm{max-width:none}}.game-chat{box-sizing:border-box;background:#fff;border:1px solid #667eea26;border-radius:16px;flex-direction:column;flex:1;height:100%;min-height:0;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #667eea26,0 0 1px #0000000d}.game-chat:hover{box-shadow:0 12px 48px #667eea33}.app.dark-mode .game-chat{background:linear-gradient(135deg,#1e2850cc 0%,#321e50cc 100%);border-color:#667eea33}.chat-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-bottom:none;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px;font-weight:700;display:flex}.chat-header h3{letter-spacing:.5px;margin:0;font-size:16px}.chat-player-count{opacity:.95;white-space:nowrap;background:#fff3;border-radius:8px;padding:4px 12px;font-size:14px;font-weight:600}.connected-players{opacity:.95;background:#fff3;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.chat-messages{box-sizing:border-box;background:linear-gradient(#f7f9fc80,#f0f5ff4d);flex-direction:column;flex:1;gap:10px;height:0;min-height:0;padding:16px 12px;display:flex;position:relative;overflow:auto}.app.dark-mode .chat-messages{background:linear-gradient(#1a1a2ecc,#16213e99)}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background:#667eeab3;border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#667eeae6}.no-messages{color:#999;text-align:center;justify-content:center;align-items:center;height:100%;padding:20px;font-size:13px;display:flex}.app.dark-mode .no-messages{color:#666}.scroll-to-bottom-btn{color:#fff;cursor:pointer;z-index:10;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .2s;display:flex;position:absolute;bottom:70px;right:16px;box-shadow:0 4px 12px #667eea4d}.scroll-to-bottom-btn:hover{transform:scale(1.1);box-shadow:0 6px 16px #667eea66}.app.dark-mode .scroll-to-bottom-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.chat-message{word-break:break-word;background:#fff;border-left:4px solid #667eea;border-radius:10px;flex-direction:column;gap:4px;padding:10px 14px;transition:all .2s;display:flex;box-shadow:0 2px 8px #0000000d}.chat-message.user-message{background:#fff;border-left-color:#667eea}.chat-message.system-message{background:0 0;border:none;padding:8px 12px}.chat-message:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea1a}.app.dark-mode .chat-message{color:#e0e0e0;background:#1a1a2e}.chat-message.own-message{background:#667eea1a;border-left-color:#667eea;margin-left:20px}.app.dark-mode .chat-message.own-message{background:#667eea33}.message-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.player-name{color:#667eea;font-size:12px;font-weight:600}.message-time{color:#999;opacity:.7;font-size:11px}.app.dark-mode .message-time{color:#666}.message-text{color:#333;text-align:left;font-size:13px;line-height:1.4}.app.dark-mode .message-text{color:#e0e0e0}.chat-input-area{background:#fff;border-top:1px solid #0000001a;flex-shrink:0;gap:8px;padding:12px;display:flex}.app.dark-mode .chat-input-area{background:#1a1a2e;border-top-color:#ffffff1a}.chat-input-area input{color:#1a1a1a;background:#fff;border:1px solid #667eea4d;border-radius:6px;flex:1;padding:8px 12px;font-family:inherit;font-size:13px}.app.dark-mode .chat-input-area input{color:#e0e0e0;background:#2a2a3e;border-color:#667eea33}.chat-input-area input::placeholder{color:#999;opacity:.7}.app.dark-mode .chat-input-area input::placeholder{color:#888}.chat-input-area input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 2px #667eea1a}.chat-input-area input:disabled{opacity:.6;cursor:not-allowed}.btn-send{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;justify-content:center;align-items:center;min-width:40px;padding:8px 12px;font-size:16px;transition:all .2s;display:flex}.btn-send:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 12px #667eea4d}.btn-send:disabled{opacity:.5;cursor:not-allowed}.chat-send-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;min-width:60px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.chat-send-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 12px #667eea4d}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}.system-message{background:0 0;border:none;justify-content:center;align-items:center;padding:8px 12px;display:flex}.system-message-content{color:#555;text-align:center;font-size:12px;font-style:italic}.app.dark-mode .system-message-content{color:#aaa}.system-message-text{color:#555;text-align:center;font-size:12px;font-style:italic}.app.dark-mode .system-message-text{color:#aaa}.chat-status{border-top:1px solid #0000001a;align-items:center;gap:8px;padding:8px 12px;font-size:12px;display:flex}.app.dark-mode .chat-status{border-top-color:#ffffff1a}.chat-status.reconnecting{color:#856404;background:#fff3cd}.app.dark-mode .chat-status.reconnecting{color:#ffc107;background:#ffc1071a}.chat-status.error{color:#721c24;background:#f8d7da;justify-content:space-between}.app.dark-mode .chat-status.error{color:#ff6b6b;background:#dc35451a}.status-indicator{font-size:14px}.status-text{flex:1}.btn-retry{color:#fff;cursor:pointer;white-space:nowrap;background:#721c24;border:none;border-radius:4px;padding:4px 8px;font-size:11px;transition:all .2s}.app.dark-mode .btn-retry{background:#dc3545}.btn-retry:hover{opacity:.8;transform:scale(1.05)}@media (width<=600px){.game-chat{max-width:100%;height:300px}}.leaderboard{box-sizing:border-box;background:#fff;border:1px solid #667eea26;border-radius:16px;flex-direction:column;flex:1;width:100%;height:0;min-height:0;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 8px 32px #667eea26,0 0 1px #0000000d}.leaderboard:hover{box-shadow:0 12px 48px #667eea33}.app.dark-mode .leaderboard{background:linear-gradient(135deg,#1e2850cc 0%,#321e50cc 100%);border-color:#667eea33}.leaderboard-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-bottom:none;flex-shrink:0;padding:16px 20px;font-weight:700}.leaderboard-header h3{letter-spacing:.5px;margin:0;font-size:16px}.player-stats{background:#667eea0d;border-bottom:1px solid #667eea33;flex-shrink:0;grid-template-columns:1fr 1fr;gap:8px;padding:12px;display:grid}.app.dark-mode .player-stats{background:#667eea1a;border-bottom-color:#667eea4d}.stat-item{text-align:center;flex-direction:column;gap:4px;display:flex}.stat-label{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.app.dark-mode .stat-label{color:#aaa}.stat-value{color:#667eea;font-size:16px;font-weight:700}.progress-bar{background:#0000001a;border-radius:3px;flex-shrink:0;height:6px;margin:0 12px 12px;overflow:hidden}.app.dark-mode .progress-bar{background:#ffffff1a}.progress-fill{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:3px;height:100%;transition:width .3s}.scores-list{box-sizing:border-box;background:linear-gradient(#f7f9fc4d,#f0f5ff33);flex-direction:column;flex:1;gap:0;height:0;min-height:0;padding:8px 0;display:flex;overflow-y:auto}.app.dark-mode .scores-list{background:linear-gradient(#1a1a2e99,#0f0f1e66)}.scores-list::-webkit-scrollbar{width:8px}.scores-list::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.scores-list::-webkit-scrollbar-thumb{background:#667eeab3;border-radius:4px}.scores-list::-webkit-scrollbar-thumb:hover{background:#667eeae6}.no-scores{color:#999;text-align:center;justify-content:center;align-items:center;height:100%;padding:20px;font-size:13px;display:flex}.app.dark-mode .no-scores{color:#666}.score-entry{background:#fff;border-bottom:1px solid #667eea14;align-items:center;gap:12px;min-height:56px;padding:14px 16px;transition:all .2s;display:flex}.app.dark-mode .score-entry{color:#e0e0e0;background:#0f0f1e;border-bottom-color:#667eea26}.score-entry:hover{background:linear-gradient(90deg,#667eea14,#764ba20a);transform:translate(2px)}.app.dark-mode .score-entry:hover{background:linear-gradient(90deg,#667eea26,#764ba214)}.score-entry.current-player{background:linear-gradient(90deg,#667eea26,#764ba214);border-left:4px solid #667eea;padding-left:12px;box-shadow:0 2px 12px #667eea1a}.app.dark-mode .score-entry.current-player{background:linear-gradient(90deg,#667eea40,#764ba226);border-left-color:#8da0f8}.rank-badge{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;min-width:32px;height:32px;font-size:13px;font-weight:800;display:flex;box-shadow:0 4px 12px #667eea4d}.score-info{flex-direction:column;flex:1;justify-content:center;gap:0;min-width:0;line-height:1;display:flex}.player-name{color:#333;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:14px;font-weight:600;line-height:1.2;overflow:hidden}.app.dark-mode .player-name{color:#e0e0e0}.points-count{color:#999;margin:2px 0 0;font-size:12px;line-height:1.2}.app.dark-mode .points-count{color:#aaa}.medal{flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;line-height:1;display:flex}.bingo-container{box-sizing:border-box;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;gap:20px;width:100%;min-height:100vh;padding:10px;display:flex;overflow:auto}.dark-mode .bingo-container{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)}.upper-container{flex-flow:wrap;justify-content:center;align-items:stretch;gap:20px;width:100%;display:flex}.panel{pointer-events:auto;background:0 0;border:none;border-radius:12px;flex-direction:column;flex:0 auto;gap:15px;width:auto;min-width:0;max-height:100%;padding:15px;transition:all .2s;display:flex;overflow-y:auto;box-shadow:0 10px 40px #0003}.panel:not(.has-content){box-shadow:none;pointer-events:none;background:0 0;border:none;flex:0 0 0;width:0;min-width:0;padding:0}.panel.drag-active{pointer-events:auto;background:0 0;border:3px dashed #667eea;flex:0 auto;width:auto;padding:15px;box-shadow:0 10px 40px #0003}.dark-mode .panel,.dark-mode .panel:not(.has-content){background:0 0}.dark-mode .panel.drag-active{background:0 0;border-color:#667eea}.left-panel,.right-panel{min-width:0}.board-resize-handle{cursor:ew-resize;opacity:.2;background:linear-gradient(#667eea,#764ba2);flex-shrink:0;width:12px;min-width:0;height:100%;transition:all .2s;display:none}.board-resize-handle:hover{opacity:.8;background:linear-gradient(#764ba2,#667eea);width:16px;box-shadow:-2px 0 10px #667eea80}.dark-mode .board-resize-handle:hover{box-shadow:-2px 0 10px #c084fc80}.middle-container{flex-flow:wrap;justify-content:center;align-self:center;gap:15px;width:auto;max-width:100%;display:flex}.bottom-container{pointer-events:auto;background:#fff;border:none;border-radius:12px;flex-direction:row;flex:1;align-self:center;gap:15px;width:90%;max-width:90%;min-height:300px;max-height:100%;padding:15px;transition:all .2s;display:flex;overflow:hidden;box-shadow:0 10px 40px #0003}.scroll-wrapper{flex-direction:column;flex:1;min-width:200px;min-height:0;display:flex;overflow:hidden}.scroll-wrapper::-webkit-scrollbar{width:8px;height:8px}.scroll-wrapper::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.scroll-wrapper::-webkit-scrollbar-thumb{background:#667eea66;border-radius:4px}.scroll-wrapper::-webkit-scrollbar-thumb:hover{background:#667eea99}.dark-mode .scroll-wrapper{background:#ffffff0d}.dark-mode .scroll-wrapper::-webkit-scrollbar-track{background:#ffffff0d}.dark-mode .scroll-wrapper::-webkit-scrollbar-thumb{background:#c084fc66}.dark-mode .scroll-wrapper::-webkit-scrollbar-thumb:hover{background:#c084fc99}.bottom-container:not(.has-content){box-shadow:none;background:0 0;border:none;padding:0}.bottom-container.drag-active{pointer-events:auto;background:#fff;border:3px dashed #667eea;padding:15px;box-shadow:0 10px 40px #0003}.dark-mode .bottom-container{background:#1a1a2e}.dark-mode .bottom-container:not(.has-content){background:0 0}.dark-mode .bottom-container.drag-active{background:#1a1a2e;border-color:#667eea}.right-container{width:300px;min-width:300px;max-width:350px;box-shadow:none;pointer-events:none;background:0 0;border:none;border-radius:12px;flex-direction:column;order:3;gap:15px;padding:15px;transition:all .2s;display:flex;overflow-y:auto}.right-container.drag-active{pointer-events:auto;background:#fff;border:3px dashed #667eea;box-shadow:0 10px 40px #0003}.dark-mode .right-container.drag-active{background:#1a1a2e;border-color:#667eea}.center-container{flex-direction:column;flex:1;order:2;gap:20px;min-width:400px;display:flex;overflow:hidden}.bottom-items{flex-flow:wrap;flex:1;align-content:flex-start;gap:15px;display:flex}.container-label{color:#999;text-transform:uppercase;letter-spacing:1px;padding:5px 0;font-size:12px;font-weight:700}.has-content .container-label{display:block}.panel:not(.has-content) .container-label,.bottom-container:not(.has-content) .container-label{display:none}.drag-active .container-label{display:block}.dark-mode .container-label{color:#aaa}.draggable-component{cursor:grab;pointer-events:auto;flex-direction:column;flex:1 1 0;min-width:280px;min-height:0;display:flex;overflow:hidden}.draggable-component:active{cursor:grabbing;opacity:.7}.bingo-main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;min-width:0;max-height:100%;padding:16px;display:flex;overflow:hidden}.bingo-card-view{background:#fff;border-radius:12px;flex-direction:column;flex:1;width:100%;min-width:300px;max-width:100%;min-height:0;padding:0;display:flex;box-shadow:0 10px 40px #0003}.card-header{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:15px;margin-bottom:10px;padding:16px 16px 0;display:flex}.card-header h1{color:#667eea;flex:1;min-width:200px;margin:0}.card-info{color:#667eea;background:#667eea1a;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:600}.host-disconnected-banner{color:#fff;text-align:center;background:linear-gradient(135deg,#f87171,#ef4444);border-radius:8px;flex-shrink:0;margin-bottom:10px;padding:16px 20px;font-weight:600;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.dark-mode .host-disconnected-banner{background:linear-gradient(135deg,#991b1b,#7f1d1d)}.auto-mark-checkbox{background:#667eea0d;border:2px solid #667eea33;border-radius:8px;flex-shrink:0;justify-content:space-between;align-items:center;gap:15px;margin:10px 16px;padding:12px 16px;display:flex}.auto-mark-checkbox label{cursor:pointer;color:#333;flex:1;align-items:center;gap:10px;margin:0;font-weight:500;display:flex}.auto-mark-checkbox input[type=checkbox]{cursor:pointer;accent-color:#667eea;width:18px;height:18px}.auto-mark-checkbox span{-webkit-user-select:none;user-select:none}.other-players-info{color:#666;font-size:12px;font-weight:500}.app.dark-mode .auto-mark-checkbox{background:#667eea1a;border-color:#667eea4d}.app.dark-mode .auto-mark-checkbox label{color:#e0e0e0}.app.dark-mode .other-players-info{color:#999}.bingo-grid{background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:0;flex:1;gap:16px;width:100%;min-width:0;height:100%;min-height:0;margin-bottom:0;padding:16px;display:grid;overflow:hidden}.bingo-cell{aspect-ratio:1;cursor:pointer;background:#fff;border:1px solid #e0e0e0;border-radius:12px;justify-content:center;align-items:center;min-width:0;min-height:0;padding:0;transition:all .2s;display:flex;position:relative;overflow:hidden}.bingo-cell:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.bingo-cell.marked{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.bingo-cell.marked .cell-content{color:#fff}.bingo-cell.marked img{opacity:.7;filter:brightness(1.2)}.bingo-cell.empty-cell{cursor:pointer;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border:3px dashed #f5576c;animation:2s ease-in-out infinite emptyPulse}.bingo-cell.empty-cell:hover{border-color:#f5576c;animation:none;transform:translateY(-4px)scale(1.02);box-shadow:0 6px 20px #f5576c66}.bingo-cell.empty-cell .cell-content{color:#fff;font-size:16px;font-weight:700}.empty-cell-placeholder{cursor:default;background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.empty-cell-text{color:#999;text-align:center;padding:10px;font-size:14px;font-weight:600}.plus-icon{color:#f5576c;z-index:3;background:#fffffff2;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:20px;font-weight:700;display:flex;position:absolute;top:8px;right:8px;box-shadow:0 2px 8px #f5576c4d}@keyframes emptyPulse{0%,to{box-shadow:0 0 #f5576c66}50%{box-shadow:0 0 0 6px #f5576c00}}.cell-content{text-align:center;color:#333;word-wrap:break-word;z-index:1;justify-content:center;align-items:center;width:100%;height:100%;line-height:1.2;display:flex;position:relative;overflow:hidden}.cell-content img{object-fit:cover;border-radius:4px;max-width:100%;max-height:100%}.cell-content span{word-break:break-word;overflow-wrap:break-word;width:100%;max-width:100%;max-height:100%;padding:6px;line-height:1.1;display:block;overflow:hidden}.check-mark{color:#fff;text-shadow:0 2px 4px #0000004d;z-index:2;font-size:32px;font-weight:700;animation:.3s ease-out checkMarkPop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes checkMarkPop{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}50%{transform:translate(-50%,-50%)scale(1.2)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.card-actions{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}.btn-configure{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s}.btn-configure:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.btn-reset{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);border:none;border-radius:8px;padding:12px 30px;font-size:15px;font-weight:600;transition:all .3s}.btn-reset:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4facfe4d}.btn-scramble{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border:none;border-radius:8px;padding:12px 30px;font-size:15px;font-weight:600;transition:all .3s}.btn-scramble:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f5576c4d}.btn-host{color:#fff;cursor:pointer;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);border:none;border-radius:8px;padding:12px 30px;font-size:15px;font-weight:600;transition:all .3s}.btn-host:hover{transform:translateY(-2px);box-shadow:0 6px 20px #11998e4d}.btn-join{color:#fff;cursor:pointer;text-shadow:0 1px 2px #0000001a;background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);border:none;border-radius:8px;padding:12px 30px;font-size:15px;font-weight:600;transition:all .3s}.btn-join:hover{transform:translateY(-2px);box-shadow:0 6px 20px #fa709a4d}.btn-leave{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);border:none;border-radius:8px;padding:12px 30px;font-size:15px;font-weight:600;transition:all .3s}.btn-leave:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b4d}.btn-configure:disabled,.btn-reset:disabled,.btn-scramble:disabled{opacity:.5;cursor:not-allowed}.btn-configure:disabled:hover,.btn-reset:disabled:hover,.btn-scramble:disabled:hover{box-shadow:none;transform:none}.app.dark-mode .bingo-card-view{color:#e0e0e0;background:#2a2a3e}.app.dark-mode .card-header h1{color:#a0d8ff}.app.dark-mode .card-info{color:#a0d8ff;background:#667eea33}.app.dark-mode .bingo-grid{background:linear-gradient(135deg,#667eea1a,#764ba21a)}.app.dark-mode .bingo-cell{color:#e0e0e0;background:#1a1a2e;border-color:#fff3}.app.dark-mode .bingo-cell:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea4d}.app.dark-mode .bingo-cell.marked{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.app.dark-mode .bingo-cell.marked .cell-content,.app.dark-mode .cell-content,.app.dark-mode .cell-content span{color:#fff}.app.dark-mode .btn-configure{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.app.dark-mode .btn-configure:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.app.dark-mode .bingo-cell.empty-cell{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border-color:#f5576c}.app.dark-mode .bingo-cell.empty-cell:hover{box-shadow:0 6px 20px #f5576c80}.app.dark-mode .bingo-cell.empty-cell .cell-content{color:#fff}.app.dark-mode .empty-cell-text{color:#555}.app.dark-mode .plus-icon{color:#f5576c;background:#fffffff2}.app.dark-mode .btn-leave{color:#fff;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%)}.app.dark-mode .btn-leave:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.app.dark-mode .btn-configure:disabled,.app.dark-mode .btn-reset:disabled,.app.dark-mode .btn-scramble:disabled{opacity:.5;cursor:not-allowed}.app.dark-mode .btn-configure:disabled:hover,.app.dark-mode .btn-reset:disabled:hover,.app.dark-mode .btn-scramble:disabled:hover{box-shadow:none;transform:none}.draggable-component{transition:all .2s}.draggable-component.dragging{opacity:.5;transform:scale(.95);cursor:grabbing!important}.left-container,.right-container,.bottom-container.drop-zone{transition:all .2s}.left-container:hover,.right-container:hover,.bottom-container.drop-zone:hover{background:#667eea14;box-shadow:0 12px 50px #667eea4d}.dark-mode .left-container:hover,.dark-mode .right-container:hover,.dark-mode .bottom-container.drop-zone:hover{background:#667eea26;box-shadow:0 12px 50px #667eea33}.bottom-container.drop-zone{min-height:300px;max-height:400px}.component-wrapper{flex:1;min-width:250px}@media (width<=1440px){.left-container,.right-container{width:280px;max-width:320px}}@media (width<=1024px){.bingo-grid{gap:8px;padding:8px}.bingo-cell{min-height:50px}.left-container,.right-container{display:none!important}.left-container.visible,.right-container.visible{width:100%;max-width:100%;display:flex!important}.bingo-container{flex-direction:column;align-items:center}.center-container{width:100%}.game-panels{flex-direction:column;max-width:500px}}@media (width<=768px){.bingo-card-container{flex-direction:column;align-items:center;max-width:100%}.bingo-card-view{width:100%;padding:15px}.card-header{flex-direction:column;align-items:flex-start}.card-header h1{min-width:auto;font-size:1.8em}.bingo-grid{gap:10px;padding:10px}.bingo-cell{min-height:60px}.cell-content{font-size:12px}.check-mark{font-size:24px}.card-actions{flex-direction:column}.btn-reset,.btn-scramble,.btn-host,.btn-join{width:100%}}.game-panels{flex-direction:row;justify-content:center;align-items:flex-start;gap:15px;width:100%;min-width:0;max-width:1200px;display:flex}.game-panels>*{flex:1;min-width:0}@media (width<=768px){.game-panels{flex-direction:column;max-width:400px}.game-panels>*{width:100%}}@media (width<=500px){.game-panels{flex-direction:column;max-width:100%;padding:0 10px}.game-panels>*{width:100%}}.game-settings{box-sizing:border-box;background:linear-gradient(135deg,#f0f0f0 0%,#e8e8e8 100%);border-radius:12px;width:100%;margin:16px 0;padding:16px;box-shadow:0 2px 8px #0000001a}.app.dark-mode .game-settings{background:linear-gradient(135deg,#2a2a3e 0%,#1f1f2e 100%)}.game-settings h3{color:#333;margin:0 0 12px;font-size:16px;font-weight:600}.app.dark-mode .game-settings h3{color:#e0e0e0}.settings-container{flex-direction:column;gap:12px;display:flex}.setting-row{background:#fff;border:1px solid #ddd;border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.app.dark-mode .setting-row{background:#1a1a2e;border-color:#404050}.setting-label{color:#333;flex:1;align-items:center;gap:8px;min-width:280px;font-size:14px;display:flex}.app.dark-mode .setting-label{color:#d0d0d0}.achievement-name{font-weight:500}.points-input{text-align:center;border:1px solid #ccc;border-radius:4px;width:60px;padding:6px 8px;font-size:14px;font-weight:600;transition:border-color .2s}.app.dark-mode .points-input{color:#e0e0e0;background:#2a2a3e;border-color:#505060}.points-input:focus{border-color:#4285f4;outline:none;box-shadow:0 0 0 3px #4285f41a}.points-input:disabled{color:#999;cursor:not-allowed;background:#f5f5f5}.app.dark-mode .points-input:disabled{color:#666;background:#0a0a14}.setting-controls{align-items:center;gap:8px;display:flex}.toggle-btn{cursor:pointer;border:none;border-radius:6px;min-width:70px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s}.toggle-btn.enabled{color:#fff;background:#4caf50}.toggle-btn.enabled:hover{background:#45a049;transform:translateY(-1px);box-shadow:0 2px 8px #4caf504d}.toggle-btn.disabled{color:#fff;background:#f44336}.toggle-btn.disabled:hover{background:#da190b;transform:translateY(-1px);box-shadow:0 2px 8px #f443364d}.frequency-btn{color:#1565c0;cursor:pointer;background:#e3f2fd;border:1px solid #2196f3;border-radius:6px;min-width:105px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s}.app.dark-mode .frequency-btn{color:#64b5f6;background:#0d47a1;border-color:#1976d2}.frequency-btn:hover:not(:disabled){color:#0d47a1;background:#bbdefb;transform:translateY(-1px);box-shadow:0 2px 8px #2196f34d}.app.dark-mode .frequency-btn:hover:not(:disabled){color:#90caf9;background:#1976d2}.frequency-btn:disabled{opacity:.5;cursor:not-allowed}@media (width<=768px){.setting-row{flex-direction:column;align-items:flex-start;gap:10px}.setting-controls{justify-content:flex-start;width:100%}.setting-label{flex-wrap:wrap;width:100%}}.host-game-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.host-game-modal{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;width:90%;max-width:700px;padding:32px;box-shadow:0 20px 60px #0000004d}.dark-mode .host-game-modal{background:linear-gradient(135deg,#2d3561 0%,#1e1b47 100%)}.host-game-modal h2{text-align:center;margin:0 0 24px;font-size:28px}.host-game-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{font-size:14px;font-weight:600}.form-group input{color:#333;background-color:#fffffff2;border:none;border-radius:8px;padding:12px;font-family:inherit;font-size:14px}.form-group input:focus{background-color:#fff;outline:none;box-shadow:0 0 0 2px #ffffff4d}.form-group input:disabled{opacity:.6;cursor:not-allowed}.form-group small{opacity:.9;font-size:12px}.game-info{background-color:#ffffff1a;border-radius:8px;padding:12px;font-size:14px}.game-info p{margin:6px 0}.error-message{color:#fecaca;background-color:#ef444433;border:1px solid #ef444480;border-radius:8px;padding:12px;font-size:14px}.warning-message{color:#fed7aa;background-color:#fb923c33;border:1px solid #fb923c80;border-radius:8px;padding:12px;font-size:14px;line-height:1.5}.warning-message code{background-color:#0003;border-radius:4px;padding:2px 6px;font-family:monospace}.form-actions{gap:12px;margin-top:12px;display:flex}.form-actions button{cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s}.form-actions .btn-primary{color:#667eea;background-color:#fff}.form-actions .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.form-actions .btn-primary:disabled{opacity:.6;cursor:not-allowed}.form-actions .btn-secondary{color:#fff;background-color:#fff3}.form-actions .btn-secondary:hover:not(:disabled){background-color:#ffffff4d}.form-actions .btn-secondary:disabled{opacity:.6;cursor:not-allowed}.dark-mode .form-group input{color:#e0e7ff;background-color:#1e1b47cc;border:1px solid #ffffff1a}.dark-mode .form-group input::placeholder{color:#e0e7ff80}.dark-mode .form-group input:focus{background-color:#2d3561;border-color:#667eea80;box-shadow:0 0 0 2px #667eea33}.dark-mode .game-info{color:#e0e7ff;background-color:#2d356180;border:1px solid #667eea33}.dark-mode .game-info p{color:#e0e7ff}.dark-mode .form-actions .btn-primary{color:#fff;background-color:#667eeae6}.dark-mode .form-actions .btn-primary:hover:not(:disabled){background-color:#667eea;box-shadow:0 8px 16px #667eea4d}.dark-mode .form-actions .btn-secondary{color:#e0e7ff;background-color:#ffffff1a;border:1px solid #fff3}.dark-mode .form-actions .btn-secondary:hover:not(:disabled){background-color:#ffffff26;border-color:#ffffff4d}.games-list-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.games-list-modal{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;flex-direction:column;width:90%;max-width:600px;max-height:70vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #0000004d}.dark-mode .games-list-modal{background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%)}.games-list-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:24px;display:flex}.games-list-header h2{margin:0;font-size:24px}.btn-close{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;transition:background-color .2s;display:flex}.btn-close:hover{background-color:#ffffff4d}.player-name-input{border-bottom:1px solid #ffffff1a;align-items:center;gap:12px;padding:0 20px 16px;display:flex}.player-name-input label{white-space:nowrap;font-size:14px;font-weight:600}.player-name-input input{color:#333;background-color:#fffffff2;border:none;border-radius:6px;flex:1;padding:8px 12px;font-family:inherit;font-size:13px}.player-name-input input:focus{background-color:#fff;outline:none;box-shadow:0 0 0 2px #ffffff4d}.games-list-content{flex:1;padding:20px;overflow-y:auto}.games-list-content::-webkit-scrollbar{width:8px}.games-list-content::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.games-list-content::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.games-list-content::-webkit-scrollbar-thumb:hover{background:#ffffff80}.loading,.empty-state{text-align:center;padding:40px 20px}.loading p,.empty-state p{margin:0 0 8px;font-size:16px}.empty-state small{opacity:.8;font-size:14px}.error-message{color:#fecaca;background-color:#ef444433;border:1px solid #ef444480;border-radius:8px;margin:10px;padding:16px;font-size:14px}.games-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.game-card{background-color:#ffffff1a;border:1px solid #fff3;border-radius:12px;flex-direction:column;gap:12px;padding:16px;transition:all .2s;display:flex}.game-card:hover{background-color:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px)}.game-card-header{justify-content:space-between;align-items:start;gap:12px;display:flex}.game-card-header h3{word-break:break-word;flex:1;margin:0;font-size:16px;font-weight:600}.game-stats{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.players-badge{white-space:nowrap;background-color:#fff3;border-radius:6px;padding:4px 8px;font-size:12px}.game-card-info{opacity:.9;font-size:13px}.game-card-info p{margin:4px 0}.hosted-by{opacity:.9;margin:4px 0;font-size:13px}.time-created{opacity:.7;font-size:12px}.game-card button.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:8px;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s}.game-card button.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#059669 0%,#047857 100%);transform:translateY(-2px);box-shadow:0 6px 16px #10b9814d}.game-card button.btn-primary:active:not(:disabled){transform:translateY(0)}.game-card button.btn-primary:disabled{opacity:.6;cursor:not-allowed}.dark-mode .game-card button.btn-primary:hover:not(:disabled){box-shadow:0 6px 16px #10b98166}.games-list-footer{border-top:1px solid #ffffff1a;gap:12px;padding:16px 20px;display:flex}.games-list-footer button{cursor:pointer;border:none;border-radius:8px;flex:1;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s}.games-list-footer .btn-primary{color:#667eea;background-color:#fff}.games-list-footer .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #0003}.games-list-footer .btn-secondary{color:#fff;background-color:#fff3}.games-list-footer .btn-secondary:hover:not(:disabled){background-color:#ffffff4d}.games-list-footer button:disabled{opacity:.5;cursor:not-allowed}@media (width<=480px){.games-grid{grid-template-columns:1fr}.games-list-modal{max-height:80vh}}.game-title{flex:1;align-items:center;gap:8px;display:flex}.game-title h3{margin:0;font-size:16px;font-weight:600}.lock-icon{flex-shrink:0;font-size:14px}.password-prompt-overlay{z-index:1001;background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.password-prompt-modal{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;width:90%;max-width:400px;padding:32px;box-shadow:0 20px 60px #0000004d}.dark-mode .password-prompt-modal{background:linear-gradient(135deg,#2d3561 0%,#1e1b47 100%)}.password-prompt-modal h3{margin:0 0 12px;font-size:20px}.password-prompt-modal p{opacity:.9;margin:0 0 16px;font-size:14px}.password-prompt-modal input{box-sizing:border-box;color:#333;background-color:#fffffff2;border:none;border-radius:6px;width:100%;margin-bottom:16px;padding:12px;font-family:inherit;font-size:14px}.password-prompt-modal input:focus{background-color:#fff;outline:none;box-shadow:0 0 0 2px #ffffff4d}.password-prompt-modal .error-message{margin-bottom:16px}.button-group{gap:12px;display:flex}.button-group button{cursor:pointer;border:none;border-radius:6px;flex:1;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s}.button-group .btn-primary{color:#667eea;background-color:#fff}.button-group .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #0003}.button-group .btn-secondary{color:#fff;background-color:#fff3}.button-group .btn-secondary:hover:not(:disabled){background-color:#ffffff4d}.button-group button:disabled{opacity:.5;cursor:not-allowed}.app{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;display:flex}.app-header{text-align:center;color:#fff;background:#0003;padding:20px;box-shadow:0 4px 6px #0000001a}.app-header h1{text-shadow:2px 2px 4px #0000004d;margin:0;font-size:2.5em}.app-main{flex:1;justify-content:center;align-items:center;min-height:0;padding:20px;display:flex;overflow-y:auto}button{cursor:pointer;border:none;border-radius:8px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .3s}.btn-add,.btn-confirm,.btn-generate{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);margin:10px 0}.btn-add:hover,.btn-confirm:hover,.btn-generate:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.btn-back{color:#fff;background:#fff3;border:2px solid #ffffff80;margin-bottom:20px}.btn-back:hover{background:#ffffff4d}.btn-remove{color:#fff;background:#ff6b6b;border-radius:4px;padding:5px 10px;font-size:12px;position:absolute;top:5px;right:5px}.btn-remove:hover{background:#ff5252}.btn-shuffle,.btn-scramble{color:#fff;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.btn-shuffle:hover,.btn-scramble:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.btn-reset{color:#fff;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.btn-reset:hover{transform:translateY(-2px)}.btn-confirm:disabled{opacity:.5;cursor:not-allowed;transform:none}input[type=number],select,textarea{color:#333;background:#fffffff2;border:2px solid #ffffff4d;border-radius:6px;padding:10px;font-family:inherit;font-size:14px}textarea:focus,input:focus,select:focus{border-color:#fff;outline:none;box-shadow:0 0 0 3px #667eea80}label{color:#fff;align-items:center;gap:10px;font-weight:500;display:flex}.btn-theme-toggle{color:#fff;cursor:pointer;background:#fff3;border:2px solid #ffffff80;border-radius:6px;padding:8px 16px;font-size:18px;transition:all .3s}.btn-theme-toggle:hover{background:#ffffff4d;transform:scale(1.1)}.app-header{justify-content:space-between;align-items:center;gap:20px;display:flex}.app-header h1{text-shadow:2px 2px 4px #0000004d;flex:1;margin:0;font-size:2.5em}.app.dark-mode{color:#e0e0e0;background:linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%)}.app.dark-mode .app-header{background:#0006;border-bottom:2px solid #ffffff1a}.app.dark-mode .app-header h1,.app.dark-mode button{color:#e0e0e0}.app.dark-mode input[type=number],.app.dark-mode select,.app.dark-mode textarea{color:#e0e0e0;background:#2a2a3e;border-color:#fff3}.app.dark-mode input[type=number]:focus,.app.dark-mode select:focus,.app.dark-mode textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea4d}.app.dark-mode label{color:#e0e0e0}.hosting-badge{color:#fff;z-index:999;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);border-radius:8px;align-items:center;gap:12px;padding:12px 20px;font-weight:600;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 4px 15px #0003}.btn-close-hosting{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:14px;transition:all .2s;display:flex}.btn-close-hosting:hover{background:#ffffff4d}@media (width<=768px){.app-main{padding:20px 10px}.app-header h1{font-size:1.8em}.app-header{flex-direction:column;align-items:center}.app-header h1{flex:none}.btn-theme-toggle{width:100%}}