🫧 BLOB PARTY!

The silliest impostor game ever

UP TO 12 PLAYERS • SAME DEVICE OR SHARE THE LINK

🎉 Host a Game!

Your Name

Pick your color

🎮 Waiting Room

Room Code:

Share the room code with friends on the same device!

--orange: #ff8c1a; --bg: #1a0a2e; --panel: #2a1545; --panel2: #1f0f38; } * { margin:0; padding:0; box-sizing:border-box; } body { background: var(--bg); font-family: 'Nunito', sans-serif; overflow: hidden; height: 100vh; width: 100vw; color: white; user-select: none; } /* CONFETTI */ .confetti-piece { position: fixed; width: 10px; height: 10px; top: -20px; animation: confettiFall linear forwards; border-radius: 2px; z-index: 9999; pointer-events: none; } @keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ── SCREENS ── */ .screen { display:none; width:100vw; height:100vh; position:absolute; top:0; left:0; } .screen.active { display:flex; flex-direction:column; align-items:center; justify-content:center; } /* ═══════════ TITLE SCREEN ═══════════ */ #screen-title { background: radial-gradient(ellipse at 50% 30%, #3d0f6b 0%, #1a0a2e 70%); } .title-blob { font-family: 'Fredoka One', cursive; font-size: clamp(48px, 10vw, 96px); background: linear-gradient(135deg, var(--pink), var(--yellow), var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titlePulse 2s ease-in-out infinite; text-shadow: none; filter: drop-shadow(0 0 30px rgba(255,100,200,0.5)); } @keyframes titlePulse { 0%,100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } } .title-sub { font-size: 18px; color: #b0a0cc; margin: 8px 0 40px; letter-spacing: 3px; text-transform: uppercase; } .blobs-preview { display: flex; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; justify-content: center; } .big-btn { background: linear-gradient(135deg, var(--pink), var(--purple)); border: none; color: white; font-family: 'Fredoka One', cursive; font-size: 28px; padding: 18px 60px; border-radius: 50px; cursor: pointer; box-shadow: 0 8px 30px rgba(255,77,141,0.5), 0 0 0 4px rgba(255,255,255,0.1); transition: all 0.15s; letter-spacing: 2px; } .big-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 40px rgba(255,77,141,0.7); } .big-btn:active { transform: translateY(1px) scale(0.98); } .big-btn.green { background: linear-gradient(135deg, #00c853, var(--green)); box-shadow: 0 8px 30px rgba(0,220,100,0.5), 0 0 0 4px rgba(255,255,255,0.1); } .big-btn.cyan { background: linear-gradient(135deg, #0077ff, var(--cyan)); box-shadow: 0 8px 30px rgba(0,180,255,0.5), 0 0 0 4px rgba(255,255,255,0.1); } /* ═══════════ LOBBY / JOIN ═══════════ */ #screen-join { background: radial-gradient(ellipse at 50% 50%, #0d1f3d 0%, #1a0a2e 80%); } .join-card { background: var(--panel); border-radius: 28px; padding: 40px; width: min(480px, 92vw); border: 2px solid rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .join-title { font-family: 'Fredoka One', cursive; font-size: 36px; text-align: center; margin-bottom: 28px; color: var(--yellow); } .name-input { width: 100%; background: rgba(255,255,255,0.07); border: 2px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 16px 20px; font-size: 22px; font-family: 'Fredoka One', cursive; color: white; outline: none; text-align: center; transition: border-color 0.2s; margin-bottom: 20px; } .name-input:focus { border-color: var(--cyan); } .name-input::placeholder { color: rgba(255,255,255,0.3); } .color-pick { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; } .color-swatch { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .color-swatch:hover { transform: scale(1.2); } .color-swatch.chosen { border-color: white; transform: scale(1.25); box-shadow: 0 0 0 3px white, 0 6px 16px rgba(0,0,0,0.5); } .room-code-display { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 14px; text-align: center; margin-bottom: 20px; font-family: 'Fredoka One', cursive; font-size: 32px; letter-spacing: 8px; color: var(--yellow); border: 2px dashed rgba(255,225,53,0.3); } .room-label { font-size: 11px; letter-spacing: 3px; color: #8070aa; text-transform: uppercase; margin-bottom: 4px; } /* ═══════════ LOBBY WAITING ═══════════ */ #screen-lobby { background: radial-gradient(ellipse at 50% 50%, #0d2030 0%, #1a0a2e 80%); flex-direction: column; } .lobby-header { font-family: 'Fredoka One', cursive; font-size: 36px; color: var(--cyan); margin-bottom: 6px; } .lobby-code { font-size: 14px; color: #8070aa; letter-spacing: 3px; margin-bottom: 30px; } .players-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; width: min(780px, 95vw); margin-bottom: 28px; } .player-slot { background: rgba(255,255,255,0.04); border: 2px dashed rgba(255,255,255,0.1); border-radius: 18px; padding: 16px 8px; text-align: center; transition: all 0.3s; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .player-slot.filled { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); animation: slotPop 0.4s ease; } @keyframes slotPop { 0% { transform: scale(0.7); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } } .slot-name { font-size: 12px; font-weight: 700; margin-top: 6px; word-break: break-word; } .slot-badge { font-size: 10px; color: var(--yellow); margin-top: 2px; } .lobby-status { font-size: 15px; color: #8070aa; margin-bottom: 20px; } .btn-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .sm-btn { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15); color: white; font-family: 'Fredoka One', cursive; font-size: 18px; padding: 12px 32px; border-radius: 40px; cursor: pointer; transition: all 0.15s; } .sm-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); } /* ═══════════ GAME SCREEN ═══════════ */ #screen-game { background: #0d0d1e; flex-direction: row; align-items: stretch; justify-content: flex-start; overflow: hidden; } #game-canvas { flex: 1; display:block; } #sidebar { width: 220px; background: var(--panel2); border-left: 2px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; padding: 16px; gap: 10px; overflow-y: auto; } .sidebar-title { font-family: 'Fredoka One', cursive; font-size: 18px; color: var(--yellow); border-bottom: 2px solid rgba(255,255,255,0.08); padding-bottom: 8px; } .player-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); font-size: 13px; font-weight: 700; transition: all 0.3s; } .player-row.is-out { opacity: 0.35; text-decoration: line-through; } .player-row.is-impostor { background: rgba(255,50,50,0.15); } .mini-blob { width:28px; height:28px; border-radius:50%; flex-shrink:0; } .task-bar-wrap { background: rgba(0,0,0,0.3); border-radius: 8px; height: 6px; margin-top: 3px; overflow:hidden; } .task-bar-fill { height:100%; border-radius:8px; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width 0.4s; } .game-phase-banner { position:absolute; top:16px; left:50%; transform:translateX(-50%); background: rgba(0,0,0,0.7); border-radius: 40px; padding: 10px 28px; font-family: 'Fredoka One', cursive; font-size: 22px; color: var(--yellow); pointer-events:none; z-index: 50; border: 2px solid rgba(255,225,53,0.3); white-space: nowrap; } /* ═══════════ TASK POPUP ═══════════ */ #task-popup { display:none; position:fixed; inset:0; z-index:200; background: rgba(0,0,0,0.75); align-items:center; justify-content:center; } #task-popup.show { display:flex; } .task-card { background: var(--panel); border-radius: 28px; padding: 36px; width: min(500px, 95vw); border: 3px solid var(--cyan); box-shadow: 0 0 60px rgba(0,229,255,0.3); text-align:center; } .task-card h2 { font-family:'Fredoka One',cursive; font-size:28px; color:var(--cyan); margin-bottom:16px; } .task-card p { color:#b0c0dd; margin-bottom:24px; font-size:16px; } /* ═══════════ VOTE POPUP ═══════════ */ #vote-popup { display:none; position:fixed; inset:0; z-index:300; background: rgba(0,0,0,0.88); align-items:center; justify-content:center; flex-direction:column; } #vote-popup.show { display:flex; } .vote-header { font-family:'Fredoka One',cursive; font-size:42px; color:var(--pink); margin-bottom:8px; text-shadow: 0 0 30px var(--pink); animation: shake 0.5s ease; } @keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} } .vote-sub { color:#8070aa; font-size:14px; margin-bottom:30px; letter-spacing:2px; } .vote-grid { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; max-width:700px; } .vote-card { background: rgba(255,255,255,0.06); border: 3px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 20px 16px; width: 110px; text-align:center; cursor:pointer; transition: all 0.2s; position:relative; } .vote-card:hover { background:rgba(255,255,255,0.14); transform:scale(1.08); border-color:var(--yellow); } .vote-card.voted-for { border-color:var(--pink); background:rgba(255,77,141,0.2); transform:scale(1.08); } .vote-card.skip-card { border-color:rgba(180,180,180,0.3); } .vote-card .vname { font-family:'Fredoka One',cursive; font-size:13px; margin-top:8px; word-break:break-word; } .vote-count-badge { position:absolute; top:-8px; right:-8px; background:var(--pink); color:white; font-size:11px; font-weight:900; border-radius:20px; padding:2px 8px; display:none; } .vote-count-badge.show { display:block; } .vote-timer { font-family:'Fredoka One',cursive; font-size:48px; color:var(--yellow); margin-top:20px; } /* ═══════════ RESULT SCREEN ═══════════ */ #screen-result { background: radial-gradient(ellipse at 50% 40%, #1a0030 0%, #0a0018 80%); } .result-title { font-family:'Fredoka One',cursive; font-size:clamp(36px,8vw,72px); margin-bottom:16px; } .result-title.crewwin { color:var(--cyan); text-shadow:0 0 40px var(--cyan); } .result-title.impwin { color:var(--pink); text-shadow:0 0 40px var(--pink); } .result-reveal { font-size:22px; color:#c0b0dd; margin-bottom:30px; } .result-impostors { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; } .result-blob-card { background:rgba(255,255,255,0.06); border-radius:20px; padding:20px 24px; text-align:center; border: 2px solid rgba(255,77,141,0.4); } .result-blob-card .rname { font-family:'Fredoka One',cursive; font-size:18px; margin-top:8px; } .result-stats { font-size:14px; color:#706090; margin-bottom:32px; } /* ═══════════ MINI TASK GAMES ═══════════ */ .task-game { margin-top:10px; } /* Color match */ .color-match-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; } .cm-cell { height:60px; border-radius:12px; cursor:pointer; transition:all 0.15s; border:3px solid transparent; } .cm-cell:hover { transform:scale(1.08); border-color:white; } /* Simon Says buttons */ .simon-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:10px; } .simon-btn { height:80px; border-radius:16px; cursor:pointer; font-family:'Fredoka One',cursive; font-size:20px; border:4px solid rgba(255,255,255,0.2); transition:all 0.15s; opacity:0.5; } .simon-btn.lit { opacity:1; transform:scale(1.05); box-shadow:0 0 30px currentColor; } /* Whack task */ .whack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; } .whack-hole { height:64px; border-radius:14px; background:rgba(0,0,0,0.4); border:2px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-size:30px; cursor:pointer; transition:all 0.15s; } .whack-hole:hover { background:rgba(255,255,255,0.08); } /* Wire task */ .wire-area { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:10px; } .wire-col { display:flex; flex-direction:column; gap:10px; } .wire-node { width:36px; height:36px; border-radius:50%; cursor:pointer; border:3px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; transition:all 0.2s; } .wire-node:hover { transform:scale(1.2); border-color:white; } .wire-node.selected { border-color:white; transform:scale(1.2); box-shadow:0 0 16px white; } .wire-canvas-wrap { position:relative; flex:1; height:160px; } #wireCanvas { position:absolute; top:0; left:0; } /* SABOTAGE FLASH */ #sabotage-overlay { display:none; position:fixed; inset:0; z-index:400; background:rgba(255,0,50,0.0); pointer-events:none; } #sabotage-overlay.flash { display:block; animation: sabFlash 0.8s ease; } @keyframes sabFlash { 0%{background:rgba(255,0,50,0)} 30%{background:rgba(255,0,50,0.4)} 100%{background:rgba(255,0,50,0)} } /* KILL ANIMATION */ .kill-flash { position:fixed; inset:0; background:rgba(200,0,30,0.6); z-index:500; pointer-events:none; animation:killFlash 0.6s ease forwards; } @keyframes killFlash { to{opacity:0} } /* TOAST */ #toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:600; pointer-events:none; } .toast-msg { background:rgba(0,0,0,0.85); color:white; padding:12px 28px; border-radius:40px; font-family:'Fredoka One',cursive; font-size:18px; margin-bottom:8px; animation:toastIn 0.3s ease, toastOut 0.3s ease 2s forwards; white-space:nowrap; } @keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes toastOut{to{opacity:0;transform:translateY(-10px)}} /* GHOST */ .player-row.ghost-style { opacity:0.35; }