: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}body{margin:0}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%}.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;width:100%;padding:12px;font-size:16px;font-weight:600;transition:all .3s}.btn-add{margin-bottom:20px}.btn-add:hover,.btn-confirm:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea4d}.btn-confirm{margin-top:30px}.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;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;max-width:300px;padding:14px;font-size:16px;font-weight:600;transition:all .3s}.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{background:#fff;border:2px solid #667eea33;border-radius:12px;flex-direction:column;flex-shrink:0;width:100%;min-width:250px;max-width:500px;height:350px;display:flex;overflow:hidden;box-shadow:0 4px 12px #0000001a}.app.dark-mode .game-chat{background:#2a2a3e;border-color:#667eea4d}.chat-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-bottom:2px solid #0000001a;padding:12px 16px;font-weight:600}.chat-header h3{margin:0;font-size:16px}.chat-messages{background:#00000005;flex-direction:column;flex:1;gap:8px;padding:12px;display:flex;overflow-y:auto}.app.dark-mode .chat-messages{background:#0003}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:#667eea4d;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#667eea80}.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}.chat-message{word-break:break-word;background:#fff;border-left:3px solid #667eea;border-radius:8px;flex-direction:column;gap:4px;padding:8px 12px;display:flex}.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{background:#fff;border-top:1px solid #0000001a;gap:8px;padding:12px;display:flex}.app.dark-mode .chat-input{background:#1a1a2e;border-top-color:#ffffff1a}.chat-input textarea{resize:none;color:#333;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 textarea{color:#e0e0e0;background:#2a2a3e;border-color:#667eea33}.chat-input textarea:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 2px #667eea1a}.chat-input textarea: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}.system-message{background:0 0;border:none;justify-content:center;align-items:center;padding:8px 12px;display:flex}.system-message-text{color:#555;text-align:center;font-size:12px;font-style:italic}.app.dark-mode .system-message-text{color:#aaa}@media (width<=600px){.game-chat{max-width:100%;height:300px}}.leaderboard{background:#fff;border:2px solid #667eea33;border-radius:12px;flex-direction:column;flex-shrink:0;width:100%;min-width:250px;max-width:500px;height:350px;display:flex;overflow:hidden;box-shadow:0 4px 12px #0000001a}.app.dark-mode .leaderboard{background:#2a2a3e;border-color:#667eea4d}.leaderboard-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-bottom:2px solid #0000001a;padding:12px 16px;font-weight:600}.leaderboard-header h3{margin:0;font-size:16px}.player-stats{background:#667eea0d;border-bottom:1px solid #667eea33;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;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{background:#00000005;flex-direction:column;flex:1;gap:0;padding:0;display:flex;overflow-y:auto}.app.dark-mode .scores-list{background:#0003}.scores-list::-webkit-scrollbar{width:6px}.scores-list::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.scores-list::-webkit-scrollbar-thumb{background:#667eea4d;border-radius:3px}.scores-list::-webkit-scrollbar-thumb:hover{background:#667eea80}.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 #0000000d;align-items:center;gap:10px;padding:12px;transition:all .2s;display:flex}.app.dark-mode .score-entry{color:#e0e0e0;background:#1a1a2e;border-bottom-color:#ffffff1a}.score-entry:hover{background:#667eea0d}.app.dark-mode .score-entry:hover{background:#667eea26}.score-entry.current-player{background:#667eea1a;border-left:3px solid #667eea;padding-left:9px}.app.dark-mode .score-entry.current-player{background:#667eea33;border-left-color:#667eea}.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:28px;height:28px;font-size:12px;font-weight:700;display:flex}.score-info{flex:1;min-width:0}.player-name{color:#333;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.app.dark-mode .player-name{color:#e0e0e0}.points-count{color:#999;margin-top:2px;font-size:12px}.app.dark-mode .points-count{color:#aaa}.medal{flex-shrink:0;font-size:16px}.bingo-card-container{flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;width:100%;max-width:1200px;padding:20px 0;display:flex}.bingo-card-view{background:#fff;border-radius:12px;width:auto;min-width:300px;max-width:100%;padding:30px;box-shadow:0 10px 40px #0003}.card-header{flex-wrap:wrap;align-items:center;gap:15px;margin-bottom:20px;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;margin-bottom:20px;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;justify-content:space-between;align-items:center;gap:15px;margin-top:15px;margin-bottom:20px;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:8px;gap:10px;min-width:0;margin-bottom:20px;padding:15px;display:grid;overflow-x:auto}.bingo-cell{aspect-ratio:1;cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;justify-content:center;align-items:center;min-height:60px;max-height:120px;padding:10px;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}.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 .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}@media (width<=1024px){.bingo-grid{gap:8px;padding:10px}.bingo-cell{min-height:50px}.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:15px}.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}.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}.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}.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:10px 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:10px 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:10px 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%}}