: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}.live-games-message{box-sizing:border-box;text-align:center;color:#4caf50;background:linear-gradient(135deg,#4caf5033,#81c78433);border:2px solid #4caf50;border-radius:8px;width:100%;padding:12px 20px;font-size:15px;font-weight:600;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.dark-mode .live-games-message{color:#81c784;background:linear-gradient(135deg,#66bb6a33,#81c78433);border-color:#81c784}@media (width<=768px){.main-menu{border-radius:16px;padding:1.2rem}.main-menu-container{padding:.8rem}.menu-header{margin-bottom:1.5rem}.menu-header h1{margin:0 0 .5rem;font-size:1.8rem}.menu-header p{font-size:.9rem}.menu-content{flex-direction:column;gap:1.5rem}.board-section{width:100%;min-width:auto}.bingo-grid{gap:.4rem;padding:.8rem}.bingo-cell{border-radius:8px;font-size:.8rem}.cell-content span{padding:2px;font-size:12px;line-height:1.1}.button-panel{flex-direction:column;gap:.8rem;width:100%}.button-group-vertical{flex-direction:column;flex:1;gap:.6rem;width:100%}.btn-primary,.btn-secondary{width:100%;min-height:44px;padding:12px 14px;font-size:14px}.board-stats{font-size:1rem}.live-games-message{padding:10px 14px;font-size:14px}}@media (width<=500px){.main-menu-container{height:auto;min-height:100vh;padding:.5rem}.main-menu{border-radius:12px;width:100%;max-width:100%;padding:1rem;box-shadow:0 10px 30px #0003}.menu-header{margin-bottom:1.2rem}.menu-header h1{margin-bottom:.3rem;font-size:1.5rem}.menu-header p{font-size:.85rem}.menu-content{flex-direction:column;gap:1rem}.board-section{gap:.8rem;width:100%}.board-stats{padding:.5rem;font-size:.95rem}.bingo-grid{gap:.3rem;padding:.6rem}.bingo-cell{border-radius:6px;min-height:auto;padding:.3rem;font-size:.75rem}.cell-content span{padding:1px;font-size:10px;line-height:1.1}.button-panel{flex-direction:column;gap:.6rem;width:100%}.button-group-vertical{flex-direction:column;gap:.5rem;width:100%}.btn-primary,.btn-secondary{width:100%;min-height:48px;padding:14px 12px;font-size:14px}.empty-cell-link .text-link{font-size:12px}.live-games-message{border-width:1px;padding:9px 12px;font-size:13px}}.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}@media (width<=768px){.confirmation-dialog-overlay{align-items:flex-end}.confirmation-dialog-modal{border-radius:16px 16px 0 0;width:95%;max-height:90vh;padding:28px;overflow-y:auto}.confirmation-dialog-modal h3{margin-bottom:14px;font-size:18px}.confirmation-dialog-modal p{margin-bottom:20px;font-size:14px}.confirmation-dialog-actions{gap:10px}.confirmation-dialog-actions button{min-width:90px;min-height:40px;padding:12px 16px;font-size:13px}}@media (width<=500px){.confirmation-dialog-overlay{align-items:stretch;padding:0}.confirmation-dialog-modal{border-radius:8px;width:100%;max-width:100%;margin:auto;padding:24px}.confirmation-dialog-modal h3{margin-bottom:12px;font-size:16px}.confirmation-dialog-modal p{margin-bottom:18px;font-size:13px;line-height:1.4}.confirmation-dialog-actions{flex-direction:column;justify-content:center;gap:8px}.confirmation-dialog-actions button{border-radius:6px;width:100%;min-width:auto;min-height:48px;padding:14px 12px;font-size:13px}}.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;box-sizing:border-box;background:#667eea;border:none;border-radius:6px;flex:1;min-width:0;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%)}.btn-import:hover{background:linear-gradient(135deg,#00f2fe 0%,#4facfe 100%);box-shadow:0 4px 12px #4facfe4d}.btn-remove-selected{color:#fff;cursor:pointer;box-sizing:border-box;background:linear-gradient(135deg,#ff6b6b 0%,#ff5252 100%);border:none;border-radius:6px;flex:1;min-width:0;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{border-radius:12px;max-width:100%;padding:24px}.square-builder h2{margin-bottom:8px;font-size:22px}.help-text{margin-bottom:20px;font-size:13px}.input-section{margin-bottom:24px}.text-input{border-radius:6px;height:140px;margin-bottom:12px;padding:12px;font-size:13px}.squares-list h3{margin-bottom:12px;font-size:16px}.squares-header{gap:10px;margin-bottom:12px}.squares-header h3{font-size:15px}.selection-buttons{flex-wrap:wrap;gap:8px}.btn-select-all,.btn-deselect-all,.btn-remove-duplicates,.btn-restore-defaults,.btn-export,.btn-import,.btn-remove-selected{width:100%;min-height:40px;padding:8px 12px;font-size:12px;display:block}.squares-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.square-item{min-height:90px;padding:10px}.square-item label{font-size:13px}.square-item span{font-size:11px}.square-item input[type=checkbox]{width:18px;height:18px;margin-right:8px}}@media (width<=500px){.square-builder{border-radius:8px;padding:16px;box-shadow:0 5px 20px #0000001a}.square-builder h2{margin-bottom:6px;font-size:18px}.help-text{margin-bottom:16px;font-size:12px}.input-section{margin-bottom:20px}.text-input{border-radius:6px;height:120px;margin-bottom:10px;padding:10px;font-size:13px}.squares-list{margin-bottom:20px}.squares-list h3{margin-bottom:10px;font-size:14px}.squares-header{flex-direction:column;align-items:stretch;gap:8px}.squares-header h3{margin:0;font-size:14px}.selection-buttons{flex-flow:column wrap;gap:6px}.btn-select-all,.btn-deselect-all,.btn-remove-duplicates,.btn-restore-defaults,.btn-export,.btn-import,.btn-remove-selected{box-sizing:border-box;border-radius:6px;width:100%;min-height:44px;margin:0;padding:12px 10px;font-size:12px;display:block}.squares-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}.square-item{min-height:85px;padding:8px}.square-item label{font-size:11px}.square-item span{font-size:9px;line-height:1.1}.square-item input[type=checkbox]{width:16px;height:16px}.square-item button{min-height:36px;padding:4px 8px;font-size:11px}}.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{border-radius:12px;max-width:100%;padding:24px}.btn-back{min-height:40px;margin-bottom:16px;padding:10px 14px;font-size:13px}.grid-setup h2{margin-bottom:24px;font-size:20px}.setup-controls{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;margin-bottom:32px}.control-group label{font-size:13px}.control-group input,.control-group select{min-height:40px;padding:10px;font-size:13px}.manual-controls{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.available-squares .squares-list{max-height:300px;padding:12px}.square-item.draggable{min-height:70px;padding:10px}.action-buttons{flex-direction:column;gap:10px}.btn-shuffle,.btn-confirm{width:100%;min-height:44px;padding:12px 14px;font-size:14px}.grid{gap:10px;padding:12px}.grid-cell{border-radius:6px;min-height:45px}.grid-cell span{padding:4px;font-size:10px}.grid-display .grid-cell{min-width:45px;min-height:45px;font-size:11px}}@media (width<=500px){.grid-setup{border-radius:8px;padding:16px;box-shadow:0 5px 20px #0000001a}.btn-back{width:100%;min-height:44px;margin-bottom:14px;padding:12px;font-size:12px}.grid-setup h2{margin-bottom:16px;font-size:18px}.setup-controls{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.control-group label{font-size:12px}.control-group input,.control-group select{min-height:48px;padding:12px;font-size:16px}.manual-controls{grid-template-columns:1fr;gap:16px;margin-bottom:20px}.available-squares h3,.grid-preview h3{margin-bottom:10px;font-size:14px}.available-squares .squares-list{gap:6px;max-height:250px;padding:10px}.square-item.draggable{min-height:60px;padding:8px;font-size:11px}.square-item button{padding:4px 8px;font-size:10px}.grid{gap:6px;padding:8px}.grid-cell{border-radius:4px;min-height:40px;padding:4px}.grid-cell span{padding:3px;font-size:9px;line-height:1.1}.grid-display{max-height:300px}.grid-display .grid-cell{min-width:40px;min-height:40px;padding:6px;font-size:10px}.action-buttons{flex-direction:column;gap:8px;margin-top:16px}.btn-shuffle,.btn-confirm{border-radius:6px;width:100%;min-height:48px;padding:14px 12px;font-size:13px}}.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<=768px){.chat-header{padding:14px 16px}.chat-header h3{font-size:15px}.chat-player-count,.connected-players{padding:3px 10px;font-size:12px}.chat-messages{gap:8px;padding:12px 10px}.chat-message{padding:8px 10px;font-size:13px}.message-input{min-height:40px;padding:12px;font-size:13px}.chat-send-button{min-height:40px;padding:12px 14px}}@media (width<=500px){.game-chat{border-radius:8px;max-width:100%;height:auto;min-height:250px}.chat-header{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.chat-header h3{font-size:13px}.chat-player-count,.connected-players{align-self:flex-end;padding:3px 8px;font-size:11px}.chat-messages{gap:6px;padding:10px 8px}.chat-messages::-webkit-scrollbar{width:4px}.chat-message{padding:6px 8px;font-size:12px}.chat-input-wrapper{background:#fff;gap:6px;padding:8px;display:flex}.message-input{flex:1;min-height:44px;padding:12px;font-size:14px}.chat-send-button{min-height:44px;padding:12px 10px;font-size:12px}}.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;position:relative}.notification-toast{color:#fff;z-index:1000;background:#4caf50;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;animation:.3s ease-out slideUp;position:fixed;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.dark-mode .notification-toast{background:#66bb6a;box-shadow:0 4px 12px #66bb6a4d}.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}.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-container{gap:12px;padding:8px}.upper-container{gap:12px}.panel{gap:12px;padding:12px}.left-panel,.right-panel{max-width:100%}.center-container{gap:12px;min-width:auto}.middle-container{gap:10px}.btn-mobile-toggle{display:none}.bottom-container{flex-direction:column;width:95%;max-width:95%;min-height:250px}.bingo-card-container{flex-direction:column;align-items:center;max-width:100%}.bingo-card-view{width:100%;padding:12px}.card-header{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 12px 0}.card-header h1{min-width:auto;font-size:1.6em}.bingo-grid{gap:8px;padding:8px}.bingo-cell{min-height:55px;font-size:13px}.cell-content{padding:4px;font-size:11px}.cell-content span{padding:3px;font-size:10px;line-height:1.1}.check-mark{font-size:22px}.card-actions{flex-direction:column;gap:8px}.btn-reset,.btn-scramble,.btn-host,.btn-join{width:100%;min-height:44px;padding:14px 12px;font-size:14px}.game-panels{flex-direction:column;width:95%;max-width:100%}.game-panels>*{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){.bingo-container{gap:8px;padding:6px}.upper-container{gap:8px}.panel{gap:8px;max-width:100%;padding:8px;width:100%!important}.left-panel,.right-panel,.center-container{width:100%;min-width:auto}.board-resize-handle{display:none!important}.middle-container{grid-template-columns:1fr 1fr;gap:8px;width:100%;display:grid}.btn-secondary{flex:none;width:100%;min-width:auto;min-height:44px;padding:10px 12px;font-size:13px}.btn-mobile-toggle{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;flex:none;width:100%;min-height:44px;padding:10px 12px;font-size:13px;font-weight:600;transition:all .3s;display:block!important}.btn-mobile-toggle:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.btn-mobile-toggle.active{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);box-shadow:0 4px 12px #4facfe66}.bottom-container{flex-direction:column;gap:8px;width:100%;max-width:100%;min-height:200px;padding:8px}.scroll-wrapper{width:100%;min-height:300px;display:none}.scroll-wrapper.mobile-visible{min-height:350px;display:flex}.scroll-wrapper.mobile-hidden{display:none!important}.bingo-main{gap:12px;padding:8px}.bingo-card-view{padding:8px}.card-header{gap:8px;padding:8px 8px 0}.card-header h1{font-size:1.4em}.card-info{padding:8px 12px;font-size:12px}.bingo-grid{gap:6px;padding:6px}.bingo-cell{border:2px solid;min-height:50px;font-size:12px}.cell-content{padding:2px;font-size:9px;line-height:1.1}.cell-content span{padding:2px;font-size:8px;line-height:1.1}.cell-content img{max-width:40px;max-height:40px}.check-mark{font-size:20px}.plus-icon{width:24px;height:24px;font-size:16px}.card-actions{flex-direction:column;gap:6px;width:100%}.btn-reset,.btn-scramble,.btn-host,.btn-join{width:100%;min-height:48px;padding:16px 10px;font-size:14px}.game-panels{flex-direction:column;width:100%;max-width:100%;padding:0 6px}.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){.game-settings{margin:12px 0;padding:14px}.game-settings h3{margin-bottom:10px;font-size:15px}.settings-container{gap:10px}.setting-row{flex-direction:column;align-items:flex-start;gap:10px;padding:8px 10px}.setting-controls{justify-content:flex-start;width:100%}.setting-label{flex-wrap:wrap;width:100%;min-width:auto;font-size:13px}.points-input{width:55px;min-height:32px;padding:6px 8px;font-size:13px}}@media (width<=500px){.game-settings{border-radius:8px;margin:10px 0;padding:12px}.game-settings h3{margin-bottom:8px;font-size:13px}.settings-container{gap:8px}.setting-row{border-radius:6px;flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px}.setting-label{gap:6px;width:100%;font-size:12px}.setting-controls{justify-content:space-between;gap:6px;width:100%}.points-input{width:50px;min-height:36px;padding:8px 6px;font-size:12px}}.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}@media (width<=768px){.host-game-overlay{align-items:flex-end}.host-game-modal{border-radius:16px 16px 0 0;width:95%;max-height:90vh;padding:24px;overflow-y:auto}.host-game-modal h2{margin-bottom:20px;font-size:24px}.host-game-form{gap:16px}.form-group{gap:6px}.form-group label{font-size:13px}.form-group input{min-height:44px;padding:12px;font-size:16px}.form-actions{gap:10px}.form-actions button{min-height:44px;padding:12px 14px;font-size:14px}}@media (width<=500px){.host-game-overlay{align-items:stretch}.host-game-modal{border-radius:8px;width:100%;max-width:100%;max-height:95vh;padding:20px}.host-game-modal h2{margin-bottom:16px;font-size:20px}.host-game-form{gap:14px}.form-group{gap:6px}.form-group label{font-size:13px;font-weight:500}.form-group input{border-radius:6px;min-height:48px;padding:14px;font-size:16px}.form-group small{font-size:11px}.game-info{padding:10px;font-size:13px}.game-info p{margin:5px 0}.error-message,.warning-message{padding:10px;font-size:12px}.form-actions{flex-direction:column;gap:8px}.form-actions button{width:100%;min-height:48px;padding:14px 12px;font-size:14px}}.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}.timer-badge{white-space:nowrap;opacity:.85;background-color:#ffffff26;border-radius:6px;padding:4px 8px;font-size:11px;transition:all .2s}.timer-badge.running{color:#c8e6c9;background-color:#4caf504d}.timer-badge.empty{color:#ffe0b2;background-color:#ff98004d}.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<=768px){.games-list-modal{width:95%;max-width:100%;max-height:85vh}.games-list-header{padding:20px}.games-list-header h2{font-size:22px}.btn-close{width:36px;height:36px}.player-name-input{gap:10px;padding:0 16px 14px}.player-name-input label{font-size:13px}.player-name-input input{min-height:40px;padding:10px 12px;font-size:14px}.games-list-content{padding:16px}.games-grid{grid-template-columns:1fr 1fr;gap:12px}.game-item{padding:14px}.game-title h3{font-size:15px}.game-stats{font-size:13px}.game-actions button{min-height:40px;padding:8px 12px;font-size:13px}.password-prompt-modal{width:90%;padding:24px}.password-prompt-modal h2{font-size:20px}.password-prompt-modal input{min-height:44px;padding:12px}.password-prompt-modal button{min-height:44px;padding:12px 16px}}@media (width<=480px){.games-list-modal{border-radius:8px;width:100%;max-width:100%;max-height:90vh}.games-list-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.games-list-header h2{margin:0;font-size:18px}.btn-close{align-self:flex-end;width:32px;height:32px;font-size:16px}.player-name-input{flex-direction:column;align-items:stretch;gap:8px;padding:0 14px 12px}.player-name-input label{white-space:normal;font-size:12px}.player-name-input input{width:100%;min-height:48px;padding:12px;font-size:16px}.games-list-content{padding:12px}.games-list-content::-webkit-scrollbar{width:6px}.games-grid{grid-template-columns:1fr;gap:10px}.game-item{padding:12px}.game-title{flex-wrap:wrap}.game-title h3{font-size:14px}.game-stats{flex-wrap:wrap;gap:8px;font-size:12px}.player-count,.timer-display{text-align:left;min-width:100%}.game-actions{gap:6px;margin-top:10px}.game-actions button{flex:1;min-width:auto;min-height:48px;padding:10px 8px;font-size:12px}.password-prompt-overlay{align-items:flex-end;padding:0}.password-prompt-modal{border-radius:8px;width:100%;max-width:100%;padding:20px}.password-prompt-modal h2{margin-bottom:16px;font-size:18px}.password-prompt-modal input{width:100%;min-height:48px;padding:14px;font-size:16px}.password-prompt-modal button{width:100%;min-height:48px;padding:14px 12px;font-size:14px}}.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}.name-entry-overlay{z-index:2000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.name-entry-modal{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;width:90%;max-width:400px;padding:32px;animation:.2s ease-out slideUp;box-shadow:0 20px 60px #0000004d}.name-entry-modal h3{margin:0 0 8px;font-size:24px;font-weight:600}.name-entry-modal p{opacity:.95;margin:0 0 24px;font-size:14px;line-height:1.5}.name-input{color:#fff;box-sizing:border-box;background-color:#ffffff1a;border:2px solid #ffffff4d;border-radius:8px;width:100%;margin-bottom:12px;padding:12px 16px;font-size:16px;transition:all .2s}.name-input::placeholder{color:#fff9}.name-input:focus{background-color:#ffffff26;border-color:#fff9;outline:none;box-shadow:0 0 0 3px #ffffff1a}.error-message{color:#fcc;background-color:#f003;border-left:3px solid #ff6b6b;border-radius:4px;margin-bottom:12px;padding:8px 12px;font-size:13px}.name-entry-actions{justify-content:center;gap:12px;display:flex}.name-entry-actions .btn{cursor:pointer;border:none;border-radius:8px;min-width:120px;padding:10px 24px;font-size:16px;font-weight:600;transition:all .2s}.name-entry-actions .btn-primary{color:#667eea;background-color:#fff}.name-entry-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.name-entry-actions .btn-primary:active{transform:translateY(0)}.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{font-size:16px}.app-main{padding:15px 10px}.app-header{flex-direction:column;gap:10px;padding:15px 10px}.app-header h1{flex:none;font-size:1.8em}.btn-theme-toggle{width:100%;min-height:44px}button{min-height:44px;padding:14px 20px;font-size:16px}input[type=number],select,textarea{min-height:44px;padding:12px;font-size:16px}.hosting-badge{flex-direction:column;gap:8px;padding:10px 15px;font-size:14px;bottom:10px;right:10px}}@media (width<=480px){.app-header{padding:12px 10px}.app-header h1{font-size:1.5em}.app-main{padding:10px 8px}button{min-height:48px;padding:16px 14px;font-size:15px}input[type=number],select,textarea{min-height:48px;padding:14px 12px;font-size:16px}.error-modal{width:95%}.error-modal-content{padding:20px}.error-modal-content h2{font-size:1.1em}.error-modal-content p{font-size:14px}.error-modal-content button{width:100%}}.error-modal-overlay{z-index:2000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.error-modal{background:#fff;border-radius:12px;width:90%;max-width:400px;animation:.3s ease-out slideUp;box-shadow:0 10px 40px #0000004d}.error-modal-content{text-align:center;padding:30px}.error-modal-content h2{color:#d32f2f;margin:0 0 15px;font-size:1.3em}.error-modal-content p{color:#666;margin:0 0 25px;font-size:.95em;line-height:1.5}.error-modal-content .btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;padding:12px 30px;font-size:15px;transition:all .3s}.error-modal-content .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.dark-mode .error-modal{color:#e0e0e0;background:#2a2a3e}.dark-mode .error-modal-content h2{color:#ff6b6b}.dark-mode .error-modal-content p{color:#b0b0b0}