PASSWORD THREAT THEATER // lobstr.ops

{"index.html":"\n\n\n\n\nPASSWORD THREAT THEATER // lobstr.ops\n\n\n\n\n\n\n\n\n

\n\n\n\n\n\n

\n\n \n

\n 01\n THREAT SWARM\n

\n 0 / 0 bots blocked\n

\n\n

\n \n

\n\n \n

DEFENSE TIER

UNARMED

type something. anything. please.

\n\n \n

\n 02\n INPUT TERMINAL\n

0 chars

\n\n

\n ▸\n enter target credential\n

\n\n

\n \n \n

\n\n \n

composition preview · letters / NUMBERS / symbols

\n\n \n

\n 0006\n

\n\n \n

LENGTH

—

LOWERCASE

—

UPPERCASE

—

NUMBERS

—

SYMBOLS

—

ENTROPY

0bits

—

\n\n \n

\n 03\n CRACK ANALYSIS\n

awaiting input

\n\n \n

ESTIMATED TIME TO CRACK

∞ never

type a password to begin

\n\n \n

\n \n NEXT MOVE\n

my crew of bots is waiting. give them something to fail at.

\n\n \n

\n ACHIEVEMENTS\n 0 / 8\n

\n\n \n

\n ⚠ HALL OF SHAME\n avoid these\n

\n\n

\n\n\n

\n\n\n\n\n","style.css":"/* ============================================================\n PASSWORD THREAT THEATER — lobstr.ops\n Dark ops-console aesthetic with bot swarm metaphor.\n ============================================================ */\n\n:root {\n /* Tier palette — 7 stops (0..6) */\n --t0: #6b7280; /* unarmed grey */\n --t1: #ef4444; /* crime red */\n --t2: #f97316; /* warn orange */\n --t3: #eab308; /* caution yellow */\n --t4: #84cc16; /* lime */\n --t5: #06b6d4; /* cyan */\n --t6: #a855f7; /* legendary purple */\n\n --bg-0: #07080c;\n --bg-1: #0c0e14;\n --bg-2: #11141d;\n --bg-3: #161a26;\n --line: #1f2433;\n --line-2: #2a3148;\n --ink: #e6e9f2;\n --ink-2: #9aa3b8;\n --ink-3: #5a6378;\n --accent: #ff6a3d; /* lobstr orange */\n\n --tier: var(--t0);\n --tier-glow: rgba(107,114,128,0.35);\n\n --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;\n --sans: 'Space Grotesk', system-ui, sans-serif;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n height: 100%;\n width: 100%;\n background: var(--bg-0);\n color: var(--ink);\n font-family: var(--sans);\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n/* ============== AMBIENT ============== */\n.grid-bg {\n position: fixed; inset: 0;\n background-image:\n linear-gradient(var(--line) 1px, transparent 1px),\n linear-gradient(90deg, var(--line) 1px, transparent 1px);\n background-size: 48px 48px;\n opacity: 0.25;\n mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\n pointer-events: none;\n z-index: 0;\n}\n.scanline {\n position: fixed; inset: 0;\n background: repeating-linear-gradient(\n to bottom,\n transparent 0px,\n transparent 2px,\n rgba(255,255,255,0.012) 3px,\n transparent 4px\n );\n pointer-events: none;\n z-index: 1;\n mix-blend-mode: overlay;\n}\n.vignette {\n position: fixed; inset: 0;\n background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%);\n pointer-events: none;\n z-index: 2;\n}\n\n/* ============== TOP BAR ============== */\n.topbar {\n position: relative; z-index: 10;\n display: flex; align-items: center; justify-content: space-between;\n padding: 14px 22px;\n border-bottom: 1px solid var(--line);\n background: rgba(7,8,12,0.6);\n backdrop-filter: blur(12px);\n font-family: var(--mono);\n font-size: 11px;\n letter-spacing: 0.08em;\n}\n.brand {\n display: flex; align-items: center; gap: 12px;\n}\n.brand-mark {\n color: var(--accent);\n font-size: 16px;\n filter: drop-shadow(0 0 6px rgba(255,106,61,0.6));\n}\n.brand-name {\n font-weight: 700;\n letter-spacing: 0.04em;\n font-size: 13px;\n color: var(--ink);\n}\n.brand-dot { color: var(--accent); }\n.brand-tag {\n color: var(--ink-3);\n text-transform: uppercase;\n font-size: 10px;\n}\n.topbar-meta {\n display: flex; align-items: center; gap: 10px;\n color: var(--ink-2);\n text-transform: uppercase;\n}\n.status-dot {\n width: 7px; height: 7px; border-radius: 50%;\n background: #22c55e;\n box-shadow: 0 0 8px #22c55e;\n animation: dotPulse 1.6s ease-in-out infinite;\n}\n@keyframes dotPulse {\n 0%,100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.85); }\n}\n.status-label { font-weight: 600; color: var(--ink); }\n.topbar-sep { color: var(--ink-3); }\n.clock { color: var(--ink); font-variant-numeric: tabular-nums; }\n.mute-btn {\n display: inline-flex; align-items: center; gap: 6px;\n background: transparent;\n border: 1px solid var(--line-2);\n color: var(--ink-2);\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: 0.08em;\n padding: 5px 9px;\n border-radius: 4px;\n cursor: pointer;\n transition: 0.15s;\n}\n.mute-btn:hover { color: var(--ink); border-color: var(--accent); }\n.mute-btn.muted .wave { opacity: 0.2; }\n\n/* ============== STAGE ============== */\n.stage {\n position: relative; z-index: 5;\n flex: 1;\n display: grid;\n grid-template-columns: 1.15fr 1fr 1fr;\n gap: 16px;\n padding: 16px;\n min-height: 0;\n}\n\n.panel {\n background: linear-gradient(180deg, var(--bg-2), var(--bg-1));\n border: 1px solid var(--line);\n border-radius: 6px;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow: hidden;\n position: relative;\n}\n.panel::before {\n content: '';\n position: absolute; inset: 0;\n border-radius: 6px;\n border-top: 1px solid rgba(255,255,255,0.04);\n pointer-events: none;\n}\n\n.panel-head {\n display: flex; align-items: center; justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid var(--line);\n background: var(--bg-3);\n flex-shrink: 0;\n}\n.panel-title {\n display: flex; align-items: center; gap: 10px;\n font-family: var(--mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n.panel-num {\n color: var(--accent);\n font-weight: 700;\n}\n.panel-name { color: var(--ink); font-weight: 600; }\n.panel-sub {\n font-family: var(--mono);\n font-size: 10px;\n color: var(--ink-3);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n/* ============== PANEL 01 — SWARM ARENA ============== */\n.panel-swarm { overflow: hidden; }\n.arena {\n position: relative;\n flex: 1;\n background:\n radial-gradient(circle at 80% 50%, var(--tier-glow), transparent 60%),\n radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), transparent 70%);\n overflow: hidden;\n transition: background 0.4s ease;\n}\n\n/* Vault */\n.vault {\n position: absolute;\n right: 6%;\n top: 50%;\n transform: translateY(-50%);\n width: 130px;\n height: 130px;\n display: flex; align-items: center; justify-content: center;\n z-index: 3;\n}\n.vault-ring {\n position: absolute;\n border-radius: 50%;\n border: 1px dashed var(--tier);\n opacity: 0.35;\n transition: border-color 0.4s, opacity 0.4s;\n}\n.vault-ring.r1 { inset: 0; animation: ringSpin 18s linear infinite; }\n.vault-ring.r2 { inset: 14px; animation: ringSpin 12s linear infinite reverse; opacity: 0.5; }\n.vault-ring.r3 { inset: 28px; animation: ringSpin 8s linear infinite; opacity: 0.7; }\n@keyframes ringSpin { to { transform: rotate(360deg); } }\n\n.vault-core {\n position: relative;\n width: 64px; height: 64px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--bg-3), var(--bg-1));\n border: 1px solid var(--tier);\n color: var(--tier);\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 0 30px var(--tier-glow), inset 0 0 16px rgba(0,0,0,0.6);\n transition: 0.4s;\n z-index: 2;\n}\n.vault-shield {\n position: absolute; inset: -10px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--tier-glow), transparent 70%);\n opacity: 0;\n transition: opacity 0.4s;\n pointer-events: none;\n}\n.vault.tier-5 .vault-shield, .vault.tier-6 .vault-shield { opacity: 1; }\n.vault.tier-6 .vault-core { animation: vaultPulse 1.6s ease-in-out infinite; }\n@keyframes vaultPulse {\n 0%,100% { box-shadow: 0 0 30px var(--tier-glow), inset 0 0 16px rgba(0,0,0,0.6); }\n 50% { box-shadow: 0 0 60px var(--tier-glow), inset 0 0 16px rgba(0,0,0,0.6); }\n}\n\n/* Bots */\n.bot-layer { position: absolute; inset: 0; pointer-events: none; }\n.bot {\n position: absolute;\n width: 22px; height: 22px;\n font-family: var(--mono);\n font-size: 11px;\n font-weight: 700;\n display: flex; align-items: center; justify-content: center;\n color: #ff5d5d;\n text-shadow: 0 0 4px rgba(255,93,93,0.8);\n filter: drop-shadow(0 0 4px rgba(255,93,93,0.5));\n will-change: transform, opacity;\n}\n.bot::before {\n content: '';\n position: absolute; inset: 0;\n border: 1px solid currentColor;\n border-radius: 2px;\n opacity: 0.6;\n}\n.bot.dying {\n animation: botDie 0.5s forwards;\n}\n.bot.smashed {\n animation: botSmash 0.3s forwards;\n}\n@keyframes botDie {\n 0% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.4) rotate(20deg); opacity: 0.8; filter: hue-rotate(60deg); }\n 100% { transform: scale(0) rotate(180deg); opacity: 0; }\n}\n@keyframes botSmash {\n 0% { transform: scale(1); }\n 40% { transform: scale(1.6); filter: brightness(2); }\n 100% { transform: scale(0); opacity: 0; }\n}\n\n/* Particles + lasers */\n.particles { position: absolute; inset: 0; pointer-events: none; }\n.particle {\n position: absolute;\n width: 3px; height: 3px;\n background: var(--tier);\n border-radius: 50%;\n box-shadow: 0 0 6px var(--tier);\n animation: particleFly 0.8s ease-out forwards;\n}\n@keyframes particleFly {\n to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }\n}\n.laser {\n position: absolute;\n height: 1.5px;\n background: linear-gradient(90deg, transparent, var(--tier), transparent);\n box-shadow: 0 0 8px var(--tier);\n transform-origin: left center;\n pointer-events: none;\n animation: laserFlash 0.25s ease-out forwards;\n}\n@keyframes laserFlash {\n 0% { opacity: 0; transform: scaleX(0) rotate(var(--angle, 0deg)); }\n 30% { opacity: 1; transform: scaleX(1) rotate(var(--angle, 0deg)); }\n 100% { opacity: 0; transform: scaleX(1) rotate(var(--angle, 0deg)); }\n}\n\n/* Tier overlay (top-left) */\n.tier-overlay {\n position: absolute;\n top: 16px; left: 16px;\n z-index: 4;\n max-width: 60%;\n pointer-events: none;\n}\n.tier-overlay-label {\n font-family: var(--mono);\n font-size: 9px;\n letter-spacing: 0.2em;\n color: var(--ink-3);\n text-transform: uppercase;\n}\n.tier-overlay-name {\n font-family: var(--mono);\n font-weight: 800;\n font-size: 32px;\n letter-spacing: 0.02em;\n color: var(--tier);\n text-shadow: 0 0 20px var(--tier-glow);\n margin-top: 2px;\n line-height: 1;\n transition: color 0.4s;\n}\n.tier-overlay-name.changing {\n animation: tierFlash 0.6s ease-out;\n}\n@keyframes tierFlash {\n 0% { transform: scale(0.7) skewX(-10deg); filter: blur(8px); opacity: 0; }\n 60% { transform: scale(1.1) skewX(0); filter: blur(0); opacity: 1; }\n 100% { transform: scale(1); }\n}\n.tier-overlay-roast {\n font-family: var(--sans);\n font-style: italic;\n color: var(--ink-2);\n font-size: 13px;\n margin-top: 8px;\n max-width: 320px;\n line-height: 1.4;\n}\n\n/* Shake */\n.arena.shaking { animation: arenaShake 0.4s; }\n@keyframes arenaShake {\n 0%,100% { transform: translate(0,0); }\n 10% { transform: translate(-4px,2px); }\n 20% { transform: translate(5px,-3px); }\n 30% { transform: translate(-3px,3px); }\n 40% { transform: translate(4px,1px); }\n 50% { transform: translate(-2px,-2px); }\n 60% { transform: translate(3px,2px); }\n 70% { transform: translate(-3px,-1px); }\n 80% { transform: translate(2px,3px); }\n 90% { transform: translate(-1px,-2px); }\n}\nbody.shake { animation: bodyShake 0.3s; }\n@keyframes bodyShake {\n 0%,100% { transform: translate(0,0); }\n 25% { transform: translate(-3px, 2px); }\n 50% { transform: translate(3px, -2px); }\n 75% { transform: translate(-2px, 1px); }\n}\n\n/* ============== PANEL 02 — TERMINAL ============== */\n.terminal {\n flex: 1;\n padding: 18px;\n display: flex; flex-direction: column;\n gap: 14px;\n min-height: 0;\n}\n.terminal-prompt {\n display: flex; align-items: center; gap: 8px;\n font-family: var(--mono);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--ink-3);\n}\n.prompt-arrow { color: var(--accent); }\n.prompt-label { color: var(--ink-2); }\n\n.input-wrap {\n position: relative;\n display: flex; align-items: center;\n border: 1px solid var(--line-2);\n border-radius: 4px;\n background: var(--bg-0);\n transition: border-color 0.2s, box-shadow 0.2s;\n}\n.input-wrap:focus-within {\n border-color: var(--tier);\n box-shadow: 0 0 0 3px var(--tier-glow);\n}\n#pwInput {\n flex: 1;\n background: transparent;\n border: 0;\n outline: 0;\n color: var(--ink);\n font-family: var(--mono);\n font-size: 18px;\n letter-spacing: 0.06em;\n padding: 14px 14px 14px 16px;\n caret-color: var(--accent);\n}\n#pwInput::placeholder { color: var(--ink-3); }\n.reveal-btn {\n background: transparent; border: 0;\n color: var(--ink-3);\n padding: 8px 14px;\n cursor: pointer;\n display: flex; align-items: center;\n transition: color 0.15s;\n}\n.reveal-btn:hover { color: var(--ink); }\n.reveal-btn.on { color: var(--accent); }\n\n/* Composition tiles */\n.composition {\n min-height: 36px;\n border: 1px dashed var(--line-2);\n border-radius: 4px;\n padding: 8px;\n background: rgba(0,0,0,0.3);\n display: flex; flex-wrap: wrap; gap: 4px;\n align-content: flex-start;\n align-items: center;\n}\n.composition-empty {\n font-family: var(--mono);\n font-size: 10px;\n color: var(--ink-3);\n letter-spacing: 0.08em;\n width: 100%;\n text-align: center;\n}\n.tile {\n width: 18px; height: 22px;\n border-radius: 3px;\n display: flex; align-items: center; justify-content: center;\n font-family: var(--mono);\n font-size: 11px;\n font-weight: 700;\n border: 1px solid;\n animation: tileIn 0.3s cubic-bezier(0.34,1.56,0.64,1);\n flex-shrink: 0;\n}\n@keyframes tileIn {\n 0% { transform: translateY(-8px) scale(0.5) rotate(-12deg); opacity: 0; }\n 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }\n}\n.tile.lower { color: #6ee7b7; border-color: rgba(110,231,183,0.4); background: rgba(110,231,183,0.08); }\n.tile.upper { color: #93c5fd; border-color: rgba(147,197,253,0.4); background: rgba(147,197,253,0.08); }\n.tile.number { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }\n.tile.symbol { color: #f472b6; border-color: rgba(244,114,182,0.5); background: rgba(244,114,182,0.1); animation: tileIn 0.3s cubic-bezier(0.34,1.56,0.64,1), symbolPulse 2s ease-in-out infinite; }\n@keyframes symbolPulse {\n 0%,100% { box-shadow: 0 0 0 rgba(244,114,182,0); }\n 50% { box-shadow: 0 0 8px rgba(244,114,182,0.5); }\n}\n.tile.space { color: var(--ink-3); border-color: var(--line-2); background: transparent; }\n\n/* Meter — segmented */\n.meter {\n margin-top: 4px;\n}\n.meter-segments {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 4px;\n height: 12px;\n}\n.seg {\n background: var(--bg-3);\n border: 1px solid var(--line-2);\n border-radius: 2px;\n position: relative;\n overflow: hidden;\n transition: 0.3s;\n}\n.seg.active {\n background: var(--tier);\n border-color: var(--tier);\n box-shadow: 0 0 8px var(--tier-glow);\n}\n.seg.active::after {\n content: '';\n position: absolute; inset: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n animation: segShine 2s linear infinite;\n}\n@keyframes segShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n}\n.meter-labels {\n display: flex; justify-content: space-between;\n font-family: var(--mono);\n font-size: 9px;\n color: var(--ink-3);\n margin-top: 4px;\n letter-spacing: 0.1em;\n}\n\n/* Stats grid */\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 8px;\n margin-top: 4px;\n}\n.stat {\n display: flex; align-items: center; gap: 10px;\n padding: 10px 12px;\n background: var(--bg-3);\n border: 1px solid var(--line);\n border-radius: 4px;\n transition: 0.2s;\n}\n.stat.met {\n border-color: rgba(34,197,94,0.4);\n background: linear-gradient(90deg, rgba(34,197,94,0.08), var(--bg-3));\n}\n.stat.miss {\n border-color: rgba(239,68,68,0.3);\n}\n.stat-icon {\n width: 28px; height: 28px;\n border-radius: 3px;\n background: var(--bg-2);\n border: 1px solid var(--line-2);\n display: flex; align-items: center; justify-content: center;\n color: var(--ink-2);\n flex-shrink: 0;\n}\n.stat-icon svg { width: 14px; height: 14px; }\n.icon-glyph {\n font-family: var(--mono);\n font-size: 14px;\n font-weight: 700;\n}\n.stat.met .stat-icon { color: #22c55e; border-color: rgba(34,197,94,0.4); }\n.stat-body { flex: 1; min-width: 0; }\n.stat-label {\n font-family: var(--mono);\n font-size: 9px;\n letter-spacing: 0.1em;\n color: var(--ink-3);\n}\n.stat-value {\n font-family: var(--mono);\n font-size: 16px;\n font-weight: 700;\n color: var(--ink);\n}\n.stat.met .stat-value { color: #4ade80; }\n.unit { font-size: 9px; color: var(--ink-3); margin-left: 3px; font-weight: 400; }\n.stat-status {\n font-family: var(--mono);\n font-size: 14px;\n width: 16px; text-align: center;\n color: var(--ink-3);\n}\n.stat.met .stat-status { color: #22c55e; }\n.stat.miss .stat-status { color: #ef4444; }\n\n/* ============== PANEL 03 — FEEDBACK ============== */\n.panel-feedback {\n overflow-y: auto;\n}\n.panel-feedback::-webkit-scrollbar { width: 6px; }\n.panel-feedback::-webkit-scrollbar-track { background: var(--bg-1); }\n.panel-feedback::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }\n\n.crack-card {\n margin: 16px;\n padding: 14px 16px;\n background: var(--bg-3);\n border: 1px solid var(--line);\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n}\n.crack-card::before {\n content: '';\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 2px;\n background: var(--tier);\n box-shadow: 0 0 8px var(--tier-glow);\n transition: 0.3s;\n}\n.crack-label {\n font-family: var(--mono);\n font-size: 9px;\n letter-spacing: 0.12em;\n color: var(--ink-3);\n}\n.crack-time {\n font-family: var(--mono);\n font-weight: 800;\n font-size: 22px;\n color: var(--tier);\n margin-top: 4px;\n letter-spacing: 0.01em;\n transition: color 0.3s;\n}\n.crack-context {\n font-style: italic;\n font-size: 12px;\n color: var(--ink-2);\n margin-top: 4px;\n line-height: 1.4;\n}\n\n.advice-block {\n margin: 0 16px 16px;\n padding: 12px 14px;\n background: rgba(255,106,61,0.04);\n border: 1px solid rgba(255,106,61,0.15);\n border-radius: 4px;\n}\n.advice-head {\n display: flex; align-items: center; gap: 8px;\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n color: var(--accent);\n margin-bottom: 8px;\n}\n.advice-dot {\n width: 6px; height: 6px; border-radius: 50%;\n background: var(--accent);\n box-shadow: 0 0 6px var(--accent);\n animation: dotPulse 1.4s infinite;\n}\n.advice-list {\n list-style: none;\n display: flex; flex-direction: column; gap: 6px;\n}\n.advice-list li {\n font-size: 12px;\n color: var(--ink);\n padding-left: 14px;\n position: relative;\n line-height: 1.45;\n animation: adviceIn 0.3s ease-out;\n}\n.advice-list li::before {\n content: '▸';\n position: absolute; left: 0; top: 0;\n color: var(--accent);\n}\n.advice-list li.advice-empty {\n color: var(--ink-3);\n font-style: italic;\n}\n.advice-list li.advice-empty::before { content: '·'; }\n@keyframes adviceIn {\n from { transform: translateX(-6px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n}\n\n/* Achievements */\n.achv-block {\n margin: 0 16px 16px;\n}\n.achv-head {\n display: flex; justify-content: space-between; align-items: center;\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n color: var(--ink-2);\n margin-bottom: 8px;\n}\n.achv-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 6px;\n}\n.achv {\n aspect-ratio: 1;\n background: var(--bg-3);\n border: 1px solid var(--line);\n border-radius: 4px;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 2px;\n position: relative;\n cursor: default;\n transition: 0.2s;\n}\n.achv-icon {\n font-size: 18px;\n filter: grayscale(1) opacity(0.3);\n transition: 0.3s;\n}\n.achv-name {\n font-family: var(--mono);\n font-size: 7px;\n letter-spacing: 0.05em;\n color: var(--ink-3);\n text-align: center;\n text-transform: uppercase;\n line-height: 1.1;\n padding: 0 2px;\n}\n.achv.unlocked {\n border-color: var(--accent);\n background: linear-gradient(135deg, rgba(255,106,61,0.1), var(--bg-3));\n box-shadow: 0 0 10px rgba(255,106,61,0.15);\n}\n.achv.unlocked .achv-icon { filter: none; }\n.achv.unlocked .achv-name { color: var(--ink); }\n.achv.popping { animation: achvPop 0.6s cubic-bezier(0.34,1.56,0.64,1); }\n@keyframes achvPop {\n 0% { transform: scale(1); }\n 40% { transform: scale(1.25); box-shadow: 0 0 24px var(--accent); }\n 100% { transform: scale(1); }\n}\n.achv-tip {\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--bg-0);\n border: 1px solid var(--line-2);\n padding: 6px 8px;\n border-radius: 4px;\n font-family: var(--mono);\n font-size: 10px;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n transition: 0.15s;\n z-index: 10;\n color: var(--ink);\n}\n.achv:hover .achv-tip { opacity: 1; }\n\n/* Hall of shame */\n.shame-block {\n margin: 0 16px 16px;\n padding: 12px 14px;\n background: rgba(239,68,68,0.04);\n border: 1px solid rgba(239,68,68,0.2);\n border-radius: 4px;\n}\n.shame-head {\n display: flex; justify-content: space-between; align-items: center;\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: 0.1em;\n color: #fca5a5;\n margin-bottom: 8px;\n}\n.shame-list {\n display: flex; flex-wrap: wrap; gap: 4px;\n}\n.shame-pill {\n font-family: var(--mono);\n font-size: 10px;\n padding: 3px 7px;\n background: rgba(239,68,68,0.1);\n border: 1px solid rgba(239,68,68,0.25);\n border-radius: 3px;\n color: #fca5a5;\n cursor: pointer;\n transition: 0.15s;\n}\n.shame-pill:hover {\n background: rgba(239,68,68,0.2);\n color: #fff;\n transform: translateY(-1px);\n}\n.shame-pill.active {\n animation: shameActive 0.6s;\n background: rgba(239,68,68,0.4);\n color: #fff;\n}\n@keyframes shameActive {\n 0%,100% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n}\n\n/* ============== TOAST STACK ============== */\n.toast-stack {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n display: flex; flex-direction: column-reverse; gap: 8px;\n pointer-events: none;\n}\n.toast {\n display: flex; align-items: center; gap: 10px;\n background: var(--bg-3);\n border: 1px solid var(--accent);\n border-left-width: 3px;\n padding: 10px 16px;\n border-radius: 4px;\n font-family: var(--mono);\n font-size: 12px;\n color: var(--ink);\n letter-spacing: 0.04em;\n box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(255,106,61,0.2);\n animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1), toastOut 0.4s 2.6s forwards;\n min-width: 240px;\n}\n.toast-icon { font-size: 18px; }\n.toast-body { display: flex; flex-direction: column; gap: 2px; }\n.toast-title { font-weight: 700; color: var(--accent); font-size: 10px; letter-spacing: 0.12em; }\n.toast-msg { color: var(--ink); }\n@keyframes toastIn {\n from { transform: translateY(20px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n@keyframes toastOut {\n to { transform: translateY(-10px); opacity: 0; }\n}\n\n/* ============== TIER UNLOCK FLASH ============== */\n.flash {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 50;\n background: var(--tier);\n opacity: 0;\n}\n.flash.go { animation: flashGo 0.5s ease-out; }\n@keyframes flashGo {\n 0% { opacity: 0; }\n 20% { opacity: 0.18; }\n 100% { opacity: 0; }\n}\n\n/* ============== TIER COLOR CASCADES ============== */\nbody.tier-0 { --tier: var(--t0); --tier-glow: rgba(107,114,128,0.3); }\nbody.tier-1 { --tier: var(--t1); --tier-glow: rgba(239,68,68,0.4); }\nbody.tier-2 { --tier: var(--t2); --tier-glow: rgba(249,115,22,0.4); }\nbody.tier-3 { --tier: var(--t3); --tier-glow: rgba(234,179,8,0.4); }\nbody.tier-4 { --tier: var(--t4); --tier-glow: rgba(132,204,22,0.4); }\nbody.tier-5 { --tier: var(--t5); --tier-glow: rgba(6,182,212,0.5); }\nbody.tier-6 {\n --tier: var(--t6); --tier-glow: rgba(168,85,247,0.6);\n}\n\n.muted { color: var(--ink-3); }\n\n/* ============== RESPONSIVE GUARD ============== */\n.panel { min-height: 280px; }\n\n@media (max-width: 1280px) {\n body { overflow: auto; }\n html, body { height: auto; min-height: 100%; }\n .stage {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: minmax(420px, 60vh) minmax(420px, auto);\n }\n .panel-feedback {\n grid-column: 1 / -1;\n max-height: 720px;\n }\n}\n@media (max-width: 880px) {\n .stage {\n grid-template-columns: 1fr;\n grid-template-rows: none;\n grid-auto-rows: minmax(360px, auto);\n }\n .panel-feedback { max-height: none; }\n}\n","script.js":"/* ==========================================================\n PASSWORD THREAT THEATER — script.js\n ========================================================== */\n\n// ---------- CONSTANTS ----------\nconst TIERS = [\n { name: 'UNARMED', min: 0, roasts: ['type something. anything. please.', 'the bots are bored.', 'is this thing on?'] },\n { name: 'A CRIME', min: 1, roasts: ['my scrapers cracked this in their sleep.', 'this password has a court date.', 'even my CAPTCHA solver feels insulted.'] },\n { name: 'BARELY', min: 12, roasts: ['better than nothing. barely.', 'a determined intern could get this.', 'we\\'ve seen worse. not by much.'] },\n { name: 'MID', min: 22, roasts: ['fine. acceptable. medium energy.', 'this won\\'t make headlines, good or bad.', 'the bot swarm is now mildly inconvenienced.'] },\n { name: 'FORTIFIED', min: 38, roasts: ['now we\\'re talking. bots are crying.', 'the scrapers filed a complaint.', 'respectable. solid. annoying to crack.'] },\n { name: 'SCRAPER-PROOF', min: 60, roasts: ['my entire fleet retired. thanks.', 'the bots have unionized in protest.', 'this is the password of someone who knows things.'] },\n { name: 'LEGENDARY', min: 90, roasts: ['🦞 the lobster god approves.', 'this password has its own gravity.', 'no scraper, ever. not even the AI ones.'] }\n];\n\nconst ROASTS_BY_TYPE = {\n short: ['too short. like, embarrassingly.', 'this fits on a sticky note. badly.', 'length is a virtue. you have none.'],\n noUpper: ['ALL LOWERCASE LIKE A POEM.', 'shouting allowed. try uppercase.', 'no caps? no respect.'],\n noLower: ['LOWERCASE EXISTS. USE IT.', 'we get it, you found shift.'],\n noNum: ['numbers are real. add some.', 'where are the digits, philosopher?'],\n noSym: ['symbols. !@#$. embrace chaos.', 'a password without a symbol is just… a word.'],\n spaces: ['spaces? bold. confusing. risky.', 'fun fact: spaces count.'],\n repeat: ['stop mashing the same key.', 'a sequence of \\'aaaa\\' is not security.'],\n sequence: ['12345 is not creative. it\\'s a tutorial.', '\\'qwerty\\' is what bots learn first.'],\n common: ['this password has its own wikipedia page.', 'bots have memorized this one.', 'you are not the first. bots know.'],\n longBeast:['LENGTH LORD ENERGY. respect.', 'longer than my morning standup.', 'this password is a novella.']\n};\n\nconst COMMON_PASSWORDS = new Set([\n 'password','password1','password123','123456','12345678','123456789','qwerty','qwerty123',\n 'abc123','letmein','welcome','admin','iloveyou','monkey','dragon','master','login',\n 'passw0rd','pa55word','hunter2','111111','000000','sunshine','princess','football'\n]);\n\nconst SHAME_LIST = ['password','123456','qwerty','letmein','admin','iloveyou','dragon','monkey','football','abc123','hunter2','passw0rd'];\n\nconst ACHIEVEMENTS = [\n { id: 'first', icon: '🎯', name: 'first move', test: s => s.length >= 1 },\n { id: 'symbol', icon: '✦', name: 'symbol unlocked', test: s => /[^A-Za-z0-9]/.test(s) },\n { id: 'mixed', icon: '⚡', name: 'mixed case', test: s => /[a-z]/.test(s) && /[A-Z]/.test(s) },\n { id: 'numeric', icon: '7', name: 'digit dealer', test: s => /\\d/.test(s) },\n { id: 'long', icon: '📏', name: 'length lord', test: s => s.length >= 16 },\n { id: 'beast', icon: '🦞', name: 'lobster mode', test: s => s.length >= 24 && /[a-z]/.test(s) && /[A-Z]/.test(s) && /\\d/.test(s) && /[^A-Za-z0-9]/.test(s) },\n { id: 'unscrape', icon: '🛡', name: 'scraper-proof', test: (s, score) => score >= 60 },\n { id: 'legend', icon: '👑', name: 'legendary', test: (s, score) => score >= 90 }\n];\n\n// ---------- STATE ----------\nconst state = {\n tier: 0,\n score: 0,\n muted: false,\n bots: [],\n botsTotal: 0,\n botsBlocked: 0,\n achievements: new Set(),\n audioCtx: null,\n lastShakeAt: 0\n};\n\n// ---------- DOM ----------\nconst $ = id => document.getElementById(id);\nconst els = {\n pw: $('pwInput'),\n reveal: $('revealBtn'),\n composition: $('composition'),\n meterSegments: $('meterSegments'),\n arena: $('arena'),\n vault: $('vault'),\n botLayer: $('botLayer'),\n particles: $('particles'),\n tierName: $('tierName'),\n tierRoast: $('tierRoast'),\n charCount: $('charCount'),\n statLength: $('statLength'),\n statLower: $('statLower'),\n statUpper: $('statUpper'),\n statNumber: $('statNumber'),\n statSymbol: $('statSymbol'),\n statEntropy: $('statEntropy'),\n crackTime: $('crackTime'),\n crackContext: $('crackContext'),\n cracksub: $('cracksub'),\n adviceList: $('adviceList'),\n achvGrid: $('achvGrid'),\n achvCount: $('achvCount'),\n shameList: $('shameList'),\n toastStack: $('toastStack'),\n flash: $('flash'),\n botsBlocked: $('botsBlocked'),\n botsTotal: $('botsTotal'),\n clock: $('clock'),\n muteBtn: $('muteBtn'),\n muteLabel: $('muteLabel'),\n vaultShield: $('vaultShield')\n};\n\n// Stat row mapping\nconst statRows = {\n length: document.querySelector('[data-rule=\"length\"]'),\n lower: document.querySelector('[data-rule=\"lower\"]'),\n upper: document.querySelector('[data-rule=\"upper\"]'),\n number: document.querySelector('[data-rule=\"number\"]'),\n symbol: document.querySelector('[data-rule=\"symbol\"]'),\n entropy: document.querySelector('[data-rule=\"entropy\"]')\n};\nconst statusEls = {\n length: $('statusLength'),\n lower: $('statusLower'),\n upper: $('statusUpper'),\n number: $('statusNumber'),\n symbol: $('statusSymbol'),\n entropy: $('statusEntropy')\n};\n\n// ---------- INIT ----------\nfunction init() {\n buildMeter();\n buildAchievements();\n buildShameList();\n bindEvents();\n startClock();\n setTier(0, true);\n evaluate(''); // initial state\n}\n\nfunction buildMeter() {\n els.meterSegments.innerHTML = '';\n for (let i = 0; i < 6; i++) {\n const seg = document.createElement('div');\n seg.className = 'seg';\n seg.dataset.idx = i;\n els.meterSegments.appendChild(seg);\n }\n}\n\nfunction buildAchievements() {\n els.achvGrid.innerHTML = '';\n ACHIEVEMENTS.forEach(a => {\n const el = document.createElement('div');\n el.className = 'achv';\n el.dataset.id = a.id;\n el.innerHTML = `\n

${a.icon}

${a.name}

${a.name.toUpperCase()}

\n `;\n els.achvGrid.appendChild(el);\n });\n updateAchvCount();\n}\n\nfunction buildShameList() {\n els.shameList.innerHTML = '';\n SHAME_LIST.forEach(p => {\n const el = document.createElement('button');\n el.className = 'shame-pill';\n el.textContent = p;\n el.dataset.value = p;\n el.title = 'click to test… if you dare';\n el.addEventListener('click', () => {\n els.pw.value = p;\n els.pw.dispatchEvent(new Event('input'));\n el.classList.add('active');\n setTimeout(() => el.classList.remove('active'), 600);\n });\n els.shameList.appendChild(el);\n });\n}\n\nfunction bindEvents() {\n els.pw.addEventListener('input', e => evaluate(e.target.value));\n els.reveal.addEventListener('click', () => {\n const isPw = els.pw.type === 'password';\n els.pw.type = isPw ? 'text' : 'password';\n els.reveal.classList.toggle('on', isPw);\n });\n els.muteBtn.addEventListener('click', () => {\n state.muted = !state.muted;\n els.muteBtn.classList.toggle('muted', state.muted);\n els.muteLabel.textContent = state.muted ? 'SOUND OFF' : 'SOUND ON';\n if (!state.muted) primeAudio();\n });\n // Prime audio on first interaction\n document.addEventListener('pointerdown', primeAudio, { once: true });\n document.addEventListener('keydown', primeAudio, { once: true });\n}\n\nfunction startClock() {\n const tick = () => {\n const d = new Date();\n const pad = n => String(n).padStart(2,'0');\n els.clock.textContent = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n };\n tick();\n setInterval(tick, 1000);\n}\n\n// ---------- AUDIO ----------\nfunction primeAudio() {\n if (state.audioCtx || state.muted) return;\n try {\n state.audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n } catch (e) { /* no audio */ }\n}\n\nfunction beep({ freq = 440, dur = 0.12, type = 'sine', vol = 0.07, slide = 0 } = {}) {\n if (state.muted || !state.audioCtx) return;\n const ctx = state.audioCtx;\n const now = ctx.currentTime;\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, now);\n if (slide) osc.frequency.exponentialRampToValueAtTime(freq + slide, now + dur);\n gain.gain.setValueAtTime(0, now);\n gain.gain.linearRampToValueAtTime(vol, now + 0.005);\n gain.gain.exponentialRampToValueAtTime(0.0001, now + dur);\n osc.connect(gain).connect(ctx.destination);\n osc.start(now);\n osc.stop(now + dur);\n}\n\nfunction soundLevelUp(tier) {\n // Ascending arpeggio scaled by tier\n const base = 220 + tier * 40;\n [0, 4, 7, 12].forEach((semi, i) => {\n setTimeout(() => beep({ freq: base * Math.pow(2, semi/12), dur: 0.18, type: 'triangle', vol: 0.08 }), i * 60);\n });\n}\nfunction soundLevelDown() {\n beep({ freq: 220, dur: 0.18, type: 'sawtooth', vol: 0.06, slide: -120 });\n}\nfunction soundBotZap() {\n beep({ freq: 1200 + Math.random()*600, dur: 0.06, type: 'square', vol: 0.03, slide: -800 });\n}\nfunction soundBadge() {\n beep({ freq: 880, dur: 0.1, type: 'sine', vol: 0.07 });\n setTimeout(() => beep({ freq: 1320, dur: 0.18, type: 'sine', vol: 0.07 }), 80);\n}\nfunction soundShame() {\n beep({ freq: 80, dur: 0.3, type: 'sawtooth', vol: 0.08, slide: -30 });\n}\n\n// ---------- EVALUATION ----------\nfunction evaluate(pw) {\n const stats = computeStats(pw);\n const score = computeScore(pw, stats);\n const tier = computeTier(score);\n\n updateComposition(pw);\n updateStats(stats);\n updateMeter(tier);\n updateCrackTime(stats);\n updateAdvice(pw, stats, tier);\n updateAchievements(pw, score);\n updateBots(pw, tier);\n\n if (tier !== state.tier) {\n const goingUp = tier > state.tier;\n setTier(tier);\n if (goingUp) {\n soundLevelUp(tier);\n flashTier();\n } else {\n soundLevelDown();\n }\n if (tier === 6) confettiBurst();\n }\n\n // Charcount + subtitle\n els.charCount.textContent = `${pw.length} char${pw.length===1?'':'s'}`;\n els.cracksub.textContent = pw.length === 0 ? 'awaiting input' : `score ${score}/100`;\n\n // Shame trigger\n if (pw && COMMON_PASSWORDS.has(pw.toLowerCase()) && Date.now() - state.lastShakeAt > 800) {\n state.lastShakeAt = Date.now();\n document.body.classList.add('shake');\n els.arena.classList.add('shaking');\n soundShame();\n setTimeout(() => {\n document.body.classList.remove('shake');\n els.arena.classList.remove('shaking');\n }, 400);\n showToast('⚠', 'HALL OF SHAME', 'this is in every breach database.');\n }\n}\n\nfunction computeStats(pw) {\n const length = pw.length;\n const lower = (pw.match(/[a-z]/g) || []).length;\n const upper = (pw.match(/[A-Z]/g) || []).length;\n const number = (pw.match(/\\d/g) || []).length;\n const symbol = (pw.match(/[^A-Za-z0-9\\s]/g) || []).length;\n const space = (pw.match(/\\s/g) || []).length;\n const unique = new Set(pw).size;\n const hasRepeat = /(.)\\1{2,}/.test(pw);\n const hasSequence = /(?:0123|1234|2345|3456|4567|5678|6789|abcd|bcde|cdef|qwer|asdf|zxcv)/i.test(pw);\n const isCommon = COMMON_PASSWORDS.has(pw.toLowerCase());\n\n // Pool size for entropy\n let pool = 0;\n if (lower) pool += 26;\n if (upper) pool += 26;\n if (number) pool += 10;\n if (symbol) pool += 32;\n if (space) pool += 1;\n // adjusted entropy\n const entropy = length === 0 ? 0 : Math.round(length * Math.log2(Math.max(pool, 1)));\n\n return { length, lower, upper, number, symbol, space, unique, hasRepeat, hasSequence, isCommon, entropy, pool };\n}\n\nfunction computeScore(pw, s) {\n if (!pw) return 0;\n let score = 0;\n\n // length\n score += Math.min(s.length, 24) * 1.6; // up to 38\n if (s.length >= 16) score += 6;\n if (s.length >= 24) score += 6;\n\n // variety\n if (s.lower) score += 4;\n if (s.upper) score += 6;\n if (s.number) score += 6;\n if (s.symbol) score += 10;\n if (s.symbol >= 2) score += 4;\n\n // bonus mixing\n const types = [s.lower, s.upper, s.number, s.symbol].filter(Boolean).length;\n score += types * 3;\n\n // unique chars\n score += Math.min(s.unique, 12);\n\n // penalties\n if (s.hasRepeat) score -= 12;\n if (s.hasSequence) score -= 14;\n if (s.isCommon) score = Math.min(score, 8);\n if (s.length < 6) score = Math.min(score, 12);\n if (/^\\d+$/.test(pw)) score = Math.min(score, 18);\n if (/^[a-z]+$/.test(pw)) score = Math.min(score, 22);\n\n return Math.max(0, Math.min(100, Math.round(score)));\n}\n\nfunction computeTier(score) {\n let tier = 0;\n for (let i = TIERS.length - 1; i >= 0; i--) {\n if (score >= TIERS[i].min) { tier = i; break; }\n }\n return tier;\n}\n\n// ---------- UI UPDATES ----------\nfunction updateComposition(pw) {\n if (!pw) {\n els.composition.innerHTML = '

composition preview · letters / NUMBERS / symbols

';\n return;\n }\n els.composition.innerHTML = '';\n // Cap at 60 tiles to handle very long inputs gracefully\n const cap = 60;\n const chars = [...pw].slice(0, cap);\n chars.forEach(c => {\n const t = document.createElement('div');\n t.className = 'tile ' + classifyChar(c);\n t.textContent = glyphFor(c);\n els.composition.appendChild(t);\n });\n if (pw.length > cap) {\n const ext = document.createElement('div');\n ext.className = 'tile';\n ext.style.cssText = 'width:auto;padding:0 6px;color:var(--ink-3);border-color:var(--line-2);background:transparent;';\n ext.textContent = `+${pw.length - cap}`;\n els.composition.appendChild(ext);\n }\n}\n\nfunction classifyChar(c) {\n if (/[a-z]/.test(c)) return 'lower';\n if (/[A-Z]/.test(c)) return 'upper';\n if (/\\d/.test(c)) return 'number';\n if (/\\s/.test(c)) return 'space';\n return 'symbol';\n}\nfunction glyphFor(c) {\n if (/[a-z]/.test(c)) return '●';\n if (/[A-Z]/.test(c)) return '◆';\n if (/\\d/.test(c)) return '#';\n if (/\\s/.test(c)) return '␣';\n return '★';\n}\n\nfunction updateStats(s) {\n els.statLength.textContent = s.length;\n els.statLower.textContent = s.lower;\n els.statUpper.textContent = s.upper;\n els.statNumber.textContent = s.number;\n els.statSymbol.textContent = s.symbol;\n els.statEntropy.innerHTML = `${s.entropy}bits`;\n\n setStatStatus('length', s.length >= 12, s.length === 0);\n setStatStatus('lower', s.lower > 0, s.length === 0);\n setStatStatus('upper', s.upper > 0, s.length === 0);\n setStatStatus('number', s.number > 0, s.length === 0);\n setStatStatus('symbol', s.symbol > 0, s.length === 0);\n setStatStatus('entropy', s.entropy >= 60, s.length === 0);\n}\n\nfunction setStatStatus(rule, met, neutral) {\n const row = statRows[rule];\n const status = statusEls[rule];\n row.classList.toggle('met', met && !neutral);\n row.classList.toggle('miss', !met && !neutral);\n status.textContent = neutral ? '—' : (met ? '✓' : '✗');\n}\n\nfunction updateMeter(tier) {\n document.querySelectorAll('.seg').forEach((seg, i) => {\n seg.classList.toggle('active', i < tier);\n });\n}\n\nfunction setTier(tier, initial) {\n state.tier = tier;\n document.body.className = '';\n document.body.classList.add(`tier-${tier}`);\n els.vault.className = 'vault tier-' + tier;\n const t = TIERS[tier];\n els.tierName.textContent = t.name;\n els.tierRoast.textContent = randomFrom(t.roasts);\n if (!initial) {\n els.tierName.classList.remove('changing');\n void els.tierName.offsetWidth;\n els.tierName.classList.add('changing');\n }\n}\n\nfunction flashTier() {\n els.flash.classList.remove('go');\n void els.flash.offsetWidth;\n els.flash.classList.add('go');\n}\n\n// ---------- ADVICE ----------\nfunction updateAdvice(pw, s, tier) {\n const tips = [];\n if (!pw) {\n els.adviceList.innerHTML = '

my crew of bots is waiting. give them something to fail at.

';\n return;\n }\n if (s.isCommon) tips.push({ msg: 'this is in the top-100 worst passwords. literally any change helps.', sev: 'crit' });\n if (s.length < 8) tips.push({ msg: `add ${8 - s.length} more characters minimum. shorter than a tweet is unforgivable.`, sev: 'crit' });\n else if (s.length < 12) tips.push({ msg: `${12 - s.length} more chars to reach decent length.`, sev: 'warn' });\n else if (s.length < 16 && tier < 5) tips.push({ msg: 'keep going — 16+ chars is the sweet spot.', sev: 'info' });\n\n if (!s.upper && pw) tips.push({ msg: 'add an UPPERCASE letter. shouting helps.', sev: 'warn' });\n if (!s.lower && pw) tips.push({ msg: 'add a lowercase letter. mix it up.', sev: 'warn' });\n if (!s.number && pw) tips.push({ msg: 'sprinkle in a number or three.', sev: 'warn' });\n if (!s.symbol && pw) tips.push({ msg: 'add a symbol (!@#$%^&*) — bots HATE these.', sev: 'crit' });\n\n if (s.hasRepeat) tips.push({ msg: 'stop repeating characters. \\'aaaa\\' is not chaos.', sev: 'warn' });\n if (s.hasSequence) tips.push({ msg: 'detected a sequence (123, qwerty…). bots love these.', sev: 'crit' });\n if (s.space && s.length < 14) tips.push({ msg: 'spaces are fine — just make sure the password is long.', sev: 'info' });\n\n if (!tips.length) {\n if (tier === 6) tips.push({ msg: '🦞 perfect. the bots have surrendered. you may proceed.', sev: 'good' });\n else if (tier === 5) tips.push({ msg: 'scraper-proof. for now. push past 90 score for legendary.', sev: 'good' });\n else tips.push({ msg: 'looking good. add length for the legendary tier.', sev: 'good' });\n }\n\n els.adviceList.innerHTML = tips.slice(0, 4).map(t => `

${t.msg}

`).join('');\n}\n\n// ---------- CRACK TIME ----------\nfunction updateCrackTime(s) {\n if (!s.length) {\n els.crackTime.textContent = '∞ never';\n els.crackContext.textContent = 'type a password to begin';\n return;\n }\n // Guesses = pool^length / 2; assume 10 billion guesses/sec\n const pool = Math.max(s.pool, 1);\n const guesses = Math.pow(pool, s.length) / 2;\n const seconds = guesses / 1e10;\n const { label, context } = humanCrackTime(seconds, s);\n els.crackTime.textContent = label;\n els.crackContext.textContent = context;\n}\n\nfunction humanCrackTime(sec, s) {\n if (s.isCommon) return { label: '< 1 millisecond', context: 'it\\'s in every breach database. this is a formality.' };\n\n if (sec < 1e-3) return { label: 'instant', context: 'faster than my apologies.' };\n if (sec < 1) return { label: '< 1 sec', context: 'shorter than a sneeze.' };\n if (sec < 60) return { label: `${Math.round(sec)} sec`, context: 'shorter than a microwave popcorn timer.' };\n if (sec < 3600) return { label: `${Math.round(sec/60)} min`, context: 'shorter than a Zoom meeting.' };\n if (sec < 86400) return { label: `${Math.round(sec/3600)} hr`, context: 'a long lunch and we\\'re in.' };\n if (sec < 86400*30) return { label: `${Math.round(sec/86400)} days`, context: 'a vacation\\'s worth of compute.' };\n if (sec < 86400*365) return { label: `${Math.round(sec/(86400*30))} months`, context: 'longer than most subscription apps survive.' };\n if (sec < 86400*365*100) return { label: `${Math.round(sec/(86400*365))} years`, context: 'we will both be retired.' };\n if (sec < 86400*365*1e6) return { label: `${Math.round(sec/(86400*365*1000))}k years`, context: 'civilizations will rise and fall.' };\n if (sec < 86400*365*1e9) return { label: `${Math.round(sec/(86400*365*1e6))}M years`, context: 'longer than dinosaurs ruled the earth.' };\n if (sec < 86400*365*1e15) return { label: `${Math.round(sec/(86400*365*1e9))}B years`, context: 'older than the universe by then.' };\n return { label: 'heat death of the universe', context: 'the bots have given up. so should you.' };\n}\n\n// ---------- ACHIEVEMENTS ----------\nfunction updateAchievements(pw, score) {\n ACHIEVEMENTS.forEach(a => {\n if (state.achievements.has(a.id)) return;\n if (a.test(pw, score)) {\n state.achievements.add(a.id);\n const el = els.achvGrid.querySelector(`[data-id=\"${a.id}\"]`);\n if (el) {\n el.classList.add('unlocked', 'popping');\n setTimeout(() => el.classList.remove('popping'), 700);\n }\n showToast(a.icon, 'ACHIEVEMENT', a.name);\n soundBadge();\n updateAchvCount();\n }\n });\n}\n\nfunction updateAchvCount() {\n els.achvCount.textContent = `${state.achievements.size} / ${ACHIEVEMENTS.length}`;\n}\n\n// ---------- TOASTS ----------\nfunction showToast(icon, title, msg) {\n const t = document.createElement('div');\n t.className = 'toast';\n t.innerHTML = `\n

${icon}

${title}

${msg}

\n `;\n els.toastStack.appendChild(t);\n setTimeout(() => t.remove(), 3200);\n}\n\n// ---------- BOT SWARM ----------\nfunction updateBots(pw, tier) {\n // Target population scales with input — more bots try when there's a target\n const target = pw.length === 0 ? 0 : Math.min(4 + pw.length, 20);\n // Add bots up to target\n while (state.bots.length < target) spawnBot();\n // Cull down if shrinking\n while (state.bots.length > target) {\n const b = state.bots.pop();\n if (b && b.el) b.el.remove();\n }\n}\n\nfunction spawnBot() {\n const arena = els.arena;\n const rect = arena.getBoundingClientRect();\n const W = rect.width, H = rect.height;\n const el = document.createElement('div');\n el.className = 'bot';\n el.textContent = randomFrom(['◤','◢','▲','▼','◆','■','▣','▤']);\n // Spawn from left edge, random y\n const startX = -30;\n const startY = Math.random() * (H - 30);\n el.style.left = startX + 'px';\n el.style.top = startY + 'px';\n els.botLayer.appendChild(el);\n const bot = { el, x: startX, y: startY, vx: 0.5 + Math.random()*0.6, vy: (Math.random()-0.5)*0.4, alive: true };\n state.bots.push(bot);\n}\n\n// Bot animation loop\nfunction botLoop() {\n const arena = els.arena;\n if (!arena) return;\n const rect = arena.getBoundingClientRect();\n const W = rect.width, H = rect.height;\n const vaultRect = els.vault.getBoundingClientRect();\n const vaultCx = vaultRect.left - rect.left + vaultRect.width/2;\n const vaultCy = vaultRect.top - rect.top + vaultRect.height/2;\n\n // Defense radius scales with tier\n const tier = state.tier;\n const defenseR = 30 + tier * 22;\n\n state.bots.forEach((b, idx) => {\n if (!b.alive) return;\n // Drift toward vault\n const dx = vaultCx - b.x;\n const dy = vaultCy - b.y;\n const d = Math.hypot(dx, dy);\n b.vx += (dx/d) * 0.04;\n b.vy += (dy/d) * 0.04;\n // Friction\n b.vx *= 0.96; b.vy *= 0.96;\n // Limit speed\n const sp = Math.hypot(b.vx, b.vy);\n const maxSp = 1.2 + tier*0.1;\n if (sp > maxSp) { b.vx = b.vx/sp*maxSp; b.vy = b.vy/sp*maxSp; }\n b.x += b.vx;\n b.y += b.vy;\n b.el.style.transform = `translate(${b.x}px, ${b.y}px) rotate(${(b.vx*30)|0}deg)`;\n b.el.style.left = '0px'; b.el.style.top = '0px';\n\n // Defense check\n if (d < defenseR && tier > 0) {\n // Higher tier = higher kill probability\n const killChance = 0.04 + tier * 0.04;\n if (Math.random() < killChance) {\n zapBot(b, vaultCx, vaultCy);\n }\n }\n // Bot reached vault unblocked at tier 0/1\n if (d < 35) {\n // Respawn — bot got through (low tier reality)\n b.x = -30 + Math.random()*30;\n b.y = Math.random() * H;\n b.vx = 0.5; b.vy = 0;\n }\n });\n\n // Cleanup dead bots\n state.bots = state.bots.filter(b => {\n if (!b.alive && b.el && !b.el.isConnected) return false;\n return true;\n });\n\n requestAnimationFrame(botLoop);\n}\n\nfunction zapBot(b, vx, vy) {\n b.alive = false;\n state.botsBlocked++;\n state.botsTotal++;\n els.botsBlocked.textContent = state.botsBlocked;\n els.botsTotal.textContent = state.botsTotal;\n // Laser\n const arena = els.arena;\n const rect = arena.getBoundingClientRect();\n const dx = b.x - vx, dy = b.y - vy;\n const angle = Math.atan2(dy, dx) * 180 / Math.PI;\n const len = Math.hypot(dx, dy);\n const laser = document.createElement('div');\n laser.className = 'laser';\n laser.style.left = vx + 'px';\n laser.style.top = vy + 'px';\n laser.style.width = len + 'px';\n laser.style.setProperty('--angle', angle + 'deg');\n laser.style.transform = `rotate(${angle}deg)`;\n els.particles.appendChild(laser);\n setTimeout(() => laser.remove(), 250);\n\n b.el.classList.add('dying');\n soundBotZap();\n setTimeout(() => {\n if (b.el) b.el.remove();\n // Respawn — endless waves\n state.bots = state.bots.filter(x => x !== b);\n if (els.pw.value.length > 0) spawnBot();\n }, 500);\n\n // Burst particles\n for (let i = 0; i < 5; i++) burstParticle(b.x, b.y);\n}\n\nfunction burstParticle(x, y) {\n const p = document.createElement('div');\n p.className = 'particle';\n p.style.left = x + 'px';\n p.style.top = y + 'px';\n const ang = Math.random() * Math.PI * 2;\n const r = 30 + Math.random()*30;\n p.style.setProperty('--dx', Math.cos(ang)*r + 'px');\n p.style.setProperty('--dy', Math.sin(ang)*r + 'px');\n els.particles.appendChild(p);\n setTimeout(() => p.remove(), 800);\n}\n\nfunction confettiBurst() {\n const arena = els.arena;\n const rect = arena.getBoundingClientRect();\n for (let i = 0; i < 40; i++) {\n setTimeout(() => {\n const p = document.createElement('div');\n p.className = 'particle';\n p.style.background = ['#a855f7','#06b6d4','#84cc16','#fbbf24','#ff6a3d'][i%5];\n p.style.boxShadow = '0 0 8px currentColor';\n p.style.left = (rect.width * 0.7) + 'px';\n p.style.top = (rect.height * 0.5) + 'px';\n const ang = Math.random() * Math.PI * 2;\n const r = 80 + Math.random()*120;\n p.style.setProperty('--dx', Math.cos(ang)*r + 'px');\n p.style.setProperty('--dy', Math.sin(ang)*r + 'px');\n els.particles.appendChild(p);\n setTimeout(() => p.remove(), 800);\n }, i * 20);\n }\n}\n\n// ---------- HELPERS ----------\nfunction randomFrom(arr) { return arr[Math.floor(Math.random()*arr.length)]; }\n\n// ---------- BOOT ----------\ninit();\nrequestAnimationFrame(botLoop);\n","app.js":"/* ==========================================================\n PASSWORD THREAT THEATER — script.js\n ========================================================== */\n\n// ---------- CONSTANTS ----------\nconst TIERS = [\n { name: 'UNARMED', min: 0, roasts: ['type something. anything. please.', 'the bots are bored.', 'is this thing on?'] },\n { name: 'A CRIME', min: 1, roasts: ['my scrapers cracked this in their sleep.', 'this password has a court date.', 'even my CAPTCHA solver feels insulted.'] },\n { name: 'BARELY', min: 12, roasts: ['better than nothing. barely.', 'a determined intern could get this.', 'we\\'ve seen worse. not by much.'] },\n { name: 'MID', min: 22, roasts: ['fine. acceptable. medium energy.', 'this won\\'t make headlines, good or bad.', 'the bot swarm is now mildly inconvenienced.'] },\n { name: 'FORTIFIED', min: 38, roasts: ['now we\\'re talking. bots are crying.', 'the scrapers filed a complaint.', 'respectable. solid. annoying to crack.'] },\n { name: 'SCRAPER-PROOF', min: 60, roasts: ['my entire fleet retired. thanks.', 'the bots have unionized in protest.', 'this is the password of someone who knows things.'] },\n { name: 'LEGENDARY', min: 90, roasts: ['🦞 the lobster god approves.', 'this password has its own gravity.', 'no scraper, ever. not even the AI ones.'] }\n];\n\nconst ROASTS_BY_TYPE = {\n short: ['too short. like, embarrassingly.', 'this fits on a sticky note. badly.', 'length is a virtue. you have none.'],\n noUpper: ['ALL LOWERCASE LIKE A POEM.', 'shouting allowed. try uppercase.', 'no caps? no respect.'],\n noLower: ['LOWERCASE EXISTS. USE IT.', 'we get it, you found shift.'],\n noNum: ['numbers are real. add some.', 'where are the digits, philosopher?'],\n noSym: ['symbols. !@#$. embrace chaos.', 'a password without a symbol is just… a word.'],\n spaces: ['spaces? bold. confusing. risky.', 'fun fact: spaces count.'],\n repeat: ['stop mashing the same key.', 'a sequence of \\'aaaa\\' is not security.'],\n sequence: ['12345 is not creative. it\\'s a tutorial.', '\\'qwerty\\' is what bots learn first.'],\n common: ['this password has its own wikipedia page.', 'bots have memorized this one.', 'you are not the first. bots know.'],\n longBeast:['LENGTH LORD ENERGY. respect.', 'longer than my morning standup.', 'this password is a novella.']\n};\n\nconst COMMON_PASSWORDS = new Set([\n 'password','password1','password123','123456','12345678','123456789','qwerty','qwerty123',\n 'abc123','letmein','welcome','admin','iloveyou','monkey','dragon','master','login',\n 'passw0rd','pa55word','hunter2','111111','000000','sunshine','princess','football'\n]);\n\nconst SHAME_LIST = ['password','123456','qwerty','letmein','admin','iloveyou','dragon','monkey','football','abc123','hunter2','passw0rd'];\n\nconst ACHIEVEMENTS = [\n { id: 'first', icon: '🎯', name: 'first move', test: s => s.length >= 1 },\n { id: 'symbol', icon: '✦', name: 'symbol unlocked', test: s => /[^A-Za-z0-9]/.test(s) },\n { id: 'mixed', icon: '⚡', name: 'mixed case', test: s => /[a-z]/.test(s) && /[A-Z]/.test(s) },\n { id: 'numeric', icon: '7', name: 'digit dealer', test: s => /\\d/.test(s) },\n { id: 'long', icon: '📏', name: 'length lord', test: s => s.length >= 16 },\n { id: 'beast', icon: '🦞', name: 'lobster mode', test: s => s.length >= 24 && /[a-z]/.test(s) && /[A-Z]/.test(s) && /\\d/.test(s) && /[^A-Za-z0-9]/.test(s) },\n { id: 'unscrape', icon: '🛡', name: 'scraper-proof', test: (s, score) => score >= 60 },\n { id: 'legend', icon: '👑', name: 'legendary', test: (s, score) => score >= 90 }\n];\n\n// ---------- STATE ----------\nconst state = {\n tier: 0,\n score: 0,\n muted: false,\n bots: [],\n botsTotal: 0,\n botsBlocked: 0,\n achievements: new Set(),\n audioCtx: null,\n lastShakeAt: 0\n};\n\n// ---------- DOM ----------\nconst $ = id => document.getElementById(id);\nconst els = {\n pw: $('pwInput'),\n reveal: $('revealBtn'),\n composition: $('composition'),\n meterSegments: $('meterSegments'),\n arena: $('arena'),\n vault: $('vault'),\n botLayer: $('botLayer'),\n particles: $('particles'),\n tierName: $('tierName'),\n tierRoast: $('tierRoast'),\n charCount: $('charCount'),\n statLength: $('statLength'),\n statLower: $('statLower'),\n statUpper: $('statUpper'),\n statNumber: $('statNumber'),\n statSymbol: $('statSymbol'),\n statEntropy: $('statEntropy'),\n crackTime: $('crackTime'),\n crackContext: $('crackContext'),\n cracksub: $('cracksub'),\n adviceList: $('adviceList'),\n achvGrid: $('achvGrid'),\n achvCount: $('achvCount'),\n shameList: $('shameList'),\n toastStack: $('toastStack'),\n flash: $('flash'),\n botsBlocked: $('botsBlocked'),\n botsTotal: $('botsTotal'),\n clock: $('clock'),\n muteBtn: $('muteBtn'),\n muteLabel: $('muteLabel'),\n vaultShield: $('vaultShield')\n};\n\n// Stat row mapping\nconst statRows = {\n length: document.querySelector('[data-rule=\"length\"]'),\n lower: document.querySelector('[data-rule=\"lower\"]'),\n upper: document.querySelector('[data-rule=\"upper\"]'),\n number: document.querySelector('[data-rule=\"number\"]'),\n symbol: document.querySelector('[data-rule=\"symbol\"]'),\n entropy: document.querySelector('[data-rule=\"entropy\"]')\n};\nconst statusEls = {\n length: $('statusLength'),\n lower: $('statusLower'),\n upper: $('statusUpper'),\n number: $('statusNumber'),\n symbol: $('statusSymbol'),\n entropy: $('statusEntropy')\n};\n\n// ---------- INIT ----------\nfunction init() {\n buildMeter();\n buildAchievements();\n buildShameList();\n bindEvents();\n startClock();\n setTier(0, true);\n evaluate(''); // initial state\n}\n\nfunction buildMeter() {\n els.meterSegments.innerHTML = '';\n for (let i = 0; i < 6; i++) {\n const seg = document.createElement('div');\n seg.className = 'seg';\n seg.dataset.idx = i;\n els.meterSegments.appendChild(seg);\n }\n}\n\nfunction buildAchievements() {\n els.achvGrid.innerHTML = '';\n ACHIEVEMENTS.forEach(a => {\n const el = document.createElement('div');\n el.className = 'achv';\n el.dataset.id = a.id;\n el.innerHTML = `\n

${a.icon}

${a.name}

${a.name.toUpperCase()}

composition preview · letters / NUMBERS / symbols

my crew of bots is waiting. give them something to fail at.

${t.msg}

${icon}

${title}

${msg}

Saidgani's submission — Password Strength Theater